js一次上傳多張圖片

1.image-file-visible.js

//選擇本地圖片插件
;(function($) {
    $.imageFileVisible = function(options) {
        // 默認選項
        var defaults = {
            //包裹圖片的元素
            wrapSelector: null,
            //<input type=file />元素
            fileSelector: null,
            width: '100%',
            height: 'auto',
            errorMessage: "請選擇圖片！"
        };
        // Extend our default options with those provided.    
        var opts = $.extend(defaults, options);
        $(opts.fileSelector).on("change", function() {
            //debugger
            //var file = this.files[0];
            var fileList = this.files;
            //上傳多張失敗
            for(var i=0;i<fileList.length;i++){
                var file = fileList[i];
            
                var imageType = /image.*/;
                if(file.type.match(imageType)) {
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        /*
                        <div class="img-item">
                            <em class="img-del"></em>
                            <img src="" style="width: 70px; height: 70px;">
                        </div>
                        */
                        var div = document.createElement("div");
                        div.setAttribute("class", "img-item");
                        var em = document.createElement("em");
                        em.setAttribute("class", "img-del");
                        
                        var img = new Image();
                        //img.src = reader.result;
                        img.src = e.target.result;
                        $(img).width(opts.width);
                        $(img).height(opts.height);
                        
                        div.appendChild(em);
                        div.appendChild(img);
                        $(opts.wrapSelector).append(div);
                        //$(opts.wrapSelector).append(img);
                        //$(opts.wrapSelector).html(img);
                    };
                    reader.readAsDataURL(file);
                } else {
                    alert(opts.errorMessage);
                }
            }    
        });
    };
})(jQuery);

2.js調用初始化

$.imageFileVisible({
            wrapSelector: '.image-wrap',
            fileSelector: '.img-input',
            width: 70,
            height: 70
        });

3.html

<div class="line clear">
                            <label class="huise wh fl"><i class="hx">*</i><span>憑證</span></label>
                            <div class="text img-add fl">添加圖片
                                <input type="file" class="img-input" multiple="multiple"/>
                            </div>
                        </div>
                        <!--憑證圖片列表-->
                        <div class="pz-list clear image-wrap"></div>