今天听同事说有些图片上传控件,可以不需要先上传,就可以预览,并且桌面浏览器和手机浏览器都兼容。
于是在网上找了几个例子,查看其工作原理,发现都是利用blob对象,但网上的例子,代码都很繁琐。
因此花点时间,自己封装了一个简单实用的jquery控件。
相对网上的繁杂的代码,我的例子代码简洁易读,并且自带表单对象(formdata)提交,大家可以方便的扩展或改写。
废话不多说,先上js控件代码:
$.fn.imgUpload = function () {
var o = $(this);
var upload = {};
upload.formData = new FormData();
upload.frame = $('<div style="width:100%;height:100%;"></div>').appendTo(o);
upload.add = $('<div style="float:left;position:relative;margin:5px;width:60px;height:60px;border:1px solid #d9d9d9;">'
+ '<div style="position:absolute;width:100%;height:100%;font-size:42px;left:0;top:0;color:#ccc;">+</div>'
+ '<input id="uploadInput" type="file" accept="image/jpg,image/jpeg,image/png,image/gif" multiple="" style="width:100%;height:100%;opacity:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);">'
+ '</div>').appendTo(upload.frame);
$("#uploadInput").on("change", function (e) {
var url = window.URL || window.webkitURL || window.mozURL,files = e.target.files;
for (var i = 0, len = files.length; i < len; ++i) {
var file = files[i];
var src = url ? url.createObjectURL(file) : e.target.result;
$('<div style="float:left;margin:5px;width:60px;height:60px;background:no-repeat 50%;background-size:cover;background-image:url(' + src + ')"></div>').insertBefore(upload.add);
upload.formData.append("file" + i, files[i]);
}
});
upload.submit = function (url, callback) {
$.ajax({
url: url,
method: 'POST',
data: this.formData,
contentType: false,
processData: false,
cache: false,
success: function (re) {
callback && callback(re);
},
error: function (ex) {
//error process....
}
});
}
return upload;
};
下面是使用举例:
<div id="divContainner" style="margin: 30px;width: 540px;height: 180px;border: 1px solid #d9d9d9;"></div>
<input id="submitBtn" type="button" value="提交" />
<script type="text/javascript">
var upd = $('#divContainner').imgUpload();
$('#submitBtn').on('click', function () {
upd.submit('/Account/ImageUpload', function (re) {
alert(re);
});
});
</script>
本代码已通过简单测试,如有疏漏,请指正。