多图片上传预览(纯前端)

所属分类:输入-上传

 175617  276  查看评论 (224)
多图片上传预览(纯前端) ie兼容10

简单的前端多图上传预览,没有后台代码,主要解决多个浏览器显示问题兼容性。

引入:

<script src="/pace/pace.min.js"></script>
<script type="text/javascript">

    //下面用于多图片上传预览功能

    function setImagePreviews(avalue) {

        var docObj = document.getElementById("doc");

        var dd = document.getElementById("dd");

        dd.innerHTML = "";

        var fileList = docObj.files;

        for (var i = 0; i < fileList.length; i++) {            

            dd.innerHTML += "<div style='float:left' > <img id='img" + i + "'  /> </div>";

            var imgObjPreview = document.getElementById("img"+i); 

            if (docObj.files && docObj.files[i]) {

                //火狐下,直接设img属性

                imgObjPreview.style.display = 'block';

                imgObjPreview.style.width = '150px';

                imgObjPreview.style.height = '180px';

                //imgObjPreview.src = docObj.files[0].getAsDataURL();

                //火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式

                imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]);

            }

            else {

                //IE下,使用滤镜

                docObj.select();

                var imgSrc = document.selection.createRange().text;

                alert(imgSrc)

                var localImagId = document.getElementById("img" + i);

                //必须设置初始大小

                localImagId.style.width = "150px";

                localImagId.style.height = "180px";

                //图片异常的捕捉,防止用户修改后缀来伪造图片

                try {

                    localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";

                    localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;

                }

                catch (e) {

                    alert("您上传的图片格式不正确,请重新选择!");

                    return false;

                }

                imgObjPreview.style.display = 'none';

                document.selection.empty();

            }

        }  

        return true;

    }

</script>
相关插件-上传

jQuery仿淘宝管理商品批量图片上传插件

jQuery淘宝上传商品图片代码,批量上传插件,(不兼容IE6,7,8)
  上传
 21046  64

多图片上传预览(纯前端)

多图片上传预览,已测试ie 360 火狐 谷歌浏览器
  上传
 175617  276

jQuery多图上传

jQuery多图图片上传.net后端以写好,直接使用
  上传
 30609  116

html5文件上传插件Pure HTML5 file upload

html5文件上传插件Pure HTML5 file upload
  上传
 31616  79

讨论这个项目(224)回答他人问题或分享插件使用方法奖励jQ币

    Hu.R 0
    2018/2/5 22:22:49

    我的为什么打开选择图片的弹窗会要等2到3秒呢,感觉打开有点慢

    回复

    O.W.P 0
    2018/1/12 16:53:15

    谢谢分享,正好需要

    回复
    ┽未来只靠自己つ 0
    2017/12/24 12:03:09

     不知道怎么用!!~~~

    回复
    树皮 0
    2017/11/27 13:31:42
    赞,但是没积分下载 回复
    张玉兰 0
    2017/11/21 11:32:41
    望海 0
    2017/11/14 14:28:41

    传给后台的话怎么传啊,本人菜鸟

    回复
    maomaomaomao 0
    2017/11/6 22:21:00

    经测试,好用呦

    回复
    苦瓜 0
    2017/11/2 14:16:32

    苹果浏览器,好像不行啊

    回复
    不离&不弃 0
    2017/10/19 17:34:09
    JQ怎么赚,每天坚持签到就有吗?
        小猪0
        2017/10/27 19:29:59

        这个真的看不懂

    回复
    欲与雨语 0
    2017/9/4 17:45:33
    JQ币怎么赚啊
        Delusion丿重来0
        2017/9/22 11:41:40

        不知道

    回复
取消回复