html上传多张图片,js一次上传多张图片

1.image-file-visible.js

//选择本地图片插件

;(function($) {

$.imageFileVisible = function(options) {

// 默认选项

var defaults = {

//包裹图片的元素

wrapSelector: null,

//元素

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

var file = fileList[i];

var imageType = /image.*/;

if(file.type.match(imageType)) {

var reader = new FileReader();

reader.onload = function(e) {

/*

*/

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

*凭证

添加图片