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

Undefind_object

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

阅读量155

点赞数

分类专栏： Javasctipt

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

版权

Javasctipt 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

<!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>

Undefind_object

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery实现图片上传前本地预览功能

<!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.
复制链接

扫一扫

专栏目录