jquery实现图片上传前本地预览功能

Undefind_object

于 2021-06-23 16:41:41 发布

阅读量181

点赞数

CC 4.0 BY-SA版权

分类专栏： Javasctipt

原文链接：https://www.jb51.net/article/83894.htm

Javasctipt 专栏收录该内容

26 篇文章

订阅专栏

这是一个关于前端开发的示例，展示了如何利用jQuery和HTML实现图片上传并实时预览的功能。通过点击头像触发隐藏的file输入框，选择图片后，利用getObjectURL方法获取文件URL，并将其设置为img标签的src属性，实现在页面上预览所选图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
	<style>
        #pic{
            width:100px;
            height:100px;
        }

	</style>
</head>
<body>
<img id="pic" src="" >

<input id="upload" name="file" accept="image/*" type="file" style="display: none"/>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>

<script>
    $(function() {
        $("#pic").click(function () {
            $("#upload").click(); //隐藏了input:file样式后，点击头像就可以本地上传
            $("#upload").on("change",function(){
                var objUrl = getObjectURL(this.files[0]) ; //获取图片的路径，该路径不是图片在本地的路径
                if (objUrl) {
                    $("#pic").attr("src", objUrl) ; //将图片路径存入src中，显示出图片
                }
            });
        });
    });

    //建立一個可存取到該file的url
    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>