JS 上传图片本地缓存预览

最新推荐文章于 2022-09-26 13:42:34 发布

weixin_34258782

最新推荐文章于 2022-09-26 13:42:34 发布

阅读量234

点赞数

文章标签： javascript ViewUI

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文件上传</title>
    <script src="jQuery.js"></script>
    <style type="text/css">
        #file{
            display: block;
            width: 400px;
            height: 300px;
            opacity:0;
            margin: -300px 0 0 0;            
        }
        #preview{
            display: block;
            width: 400px;
            height: 300px;
        }
    </style>
</head>
<body>
    <img id="preview" src="" alt="点击上传图片"/>
    <input type="file" id="file" />
</body>
</html>
<script type="text/javascript">

　　　　window.FileToSrc = function (file) {
    　　 if (window.URL) return window.URL.createObjectURL(file);
    　　 if (window.windcreateObjectURL) return window.createObjectURL(file);
   　　  if (window.webkitURL) return window.webkitURL.createObjectURL(file);
　　 };


    $('#file').on('change', function(){
        //获取文件列表对象
        var fileList = $('#file')[0].files;
        //创建文件流获取文件地址
        var src =FileToSrc(fileList[0]); 　　　　
　　　　 //设置图片路径  
　　　　 $("#preview").attr("src", src); 
　　});
</script>

weixin_34258782

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS 上传图片本地缓存预览

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;文件上传&lt;/title&gt; &lt;script src="jQuery.js"&gt;&lt;/script&gt;
复制链接

扫一扫