javascript预览本地图片

最新推荐文章于 2025-09-06 08:01:57 发布

weixin_30699741

最新推荐文章于 2025-09-06 08:01:57 发布

阅读量80

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/buexplain/p/5260804.html

本文介绍如何利用jQuery实现文件上传功能，并在页面上实时预览上传的图片，包括HTML、JavaScript和jQuery的基本应用。

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="buexplain">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script src="jquery.js"></script>
</head>
<body>
    <input type="file" id="imgfile">
    <img id="imgsrc" src="">
    <script>
        $(function() {
            $("#imgsrc").hide();
            $("#imgfile").change(function() {
                var objUrl = getObjectURL(this.files[0]);
                console.log("objUrl = " + objUrl);
                if (objUrl) {
                    $("#imgsrc").attr("src", objUrl);
                    $("#imgsrc").show();
                }
            });

            function getObjectURL(file) {
                var url = null;
                if (window.createObjectURL != undefined) { // basic
                    url = window.createObjectURL(file);
                } else if (window.URL != undefined) { // mozilla(firefox)
                    url = window.URL.createObjectURL(file);
                } else if (window.webkitURL != undefined) { // webkit or chrome
                    url = window.webkitURL.createObjectURL(file);
                }
                return url;
            }
        });
    </script>
</body>
</html>

转载于:https://www.cnblogs.com/buexplain/p/5260804.html