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>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。