HTML5图片上传前预览（支持多选）

最新推荐文章于 2024-08-08 16:48:10 发布

冬冬君

最新推荐文章于 2024-08-08 16:48:10 发布

阅读量3.6k

点赞数 1

分类专栏： HTML 文章标签： html5 jquery 图片

本文链接：https://blog.csdn.net/lddtime/article/details/64126284

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

参考：HTML5 jQuery图片上传前预览

HTML5实现图片上传前预览！

本例主要是使用HTML5 的File API，创建一个可存取到该file的url，利用url生成img的DOM对象，实现图片预览功能。

请选择支持HTML API的浏览器，比如谷歌Chrome和火狐等。




    HTML5图片上传前预览
    <script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>


    
   
   
    
    HTML5图片上传前预览
   
   
    
   
   
    
    
   
   
    
   
   

<script type="text/javascript">
    $("input[name=img]").change(function() {
        $("#img").html(null);
        $.each(this.files, function (k, v) {
            var objUrl = getObjectURL(v);
            var img = '';
            if (objUrl) {
                $("#img").append(img);
            }
        });
    });

    //创建一个可存取到该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>