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
*凭证
添加图片
