业务需求，移动端app需要一个单图片上传的功能，并且只允许照相，不允许从本地选取，本来想使用webUploader来做，配置好了，发现一个问题只能上传一次，在次上传，缩略图不替换（也有可能这个插件我没配置使用好，此处不做过多纠结），然后就参考写了一个。
代码如下（需要依赖jq）
html
<div id="imgUpload">
<img src="upload.png" alt=""><!--upload.png为初始显示背景图-->
</div>
css
#imgUpload {
width: 88px;
height: 88px;
}
#imgUpload img {
width: 100%;
height: 100%;
}
js
//图片上传
function ImgUpload(id, options) {
this.me = $(id);
this.callback = options.callback;
this.init();
}
ImgUpload.prototype = {
init: function () {
this.eventClickInit();
},
eventClickInit:function () {
var self = this;
this.me.unbind().click(function() {
self.createImageUploadDialog();
})
},
onChangeUploadFile: function() {
var fileInput = this.fileInput;
var files = fileInput.files;
if (files.length == 0) {
return false;
}
var file = files[0];
if (file.type.indexOf('image') === -1) {
alert("您上传的不是图片！");
return false;
}
var img = window.URL.createObjectURL(file);
var filename = file.name;
var filesize = Math.floor((file.size) / 1024);
if (filesize > 1024 * 20) {
alert("上传大小不能超过20M.");
return false;
}
this.me.find("img").attr("src", img);
this.me.find("img").attr("title", filename);
if (this.callback) {
this.callback(files);
}
},
createImageUploadDialog: function() {
var fileInput = this.fileInput;
if (!fileInput) {
fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.name = 'ime-images';
fileInput.accept = 'image/*';
fileInput.capture = 'camera';//只允许照相
fileInput.multiple = false;//不允许多选
fileInput.onchange = this.onChangeUploadFile.bind(this);
this.fileInput = fileInput;
}
fileInput.click();
}
}
//调用方法
var dragImgUpload = new ImgUpload("#imgUpload",{
callback:function (files) {
var imgFile = files[0];
console.log(imgFile);
//do something 调取接口进行上传等操作。
}
});