背景
UI如图所示,其中有一个拍照图标,点击后要选择拍照或者从相册中选择要上传的图片。
拍照上传部分的代码如下
html部分
<div class="take-photo">
<img src="./images/take-photo.png" class="take-phote-picture">
<input type="file" name="file" accept="images/*" class="select-picture">
</div>
css部分
.take-phote-picture{
margin: 10px 20px;
width: 100px;
}
.select-picture{
opacity: 0;
position: absolute;
width: 100px;
height: 100px;
top: 10px;
left: 70px;
border-radius: 50px;
}
设计思路
将一个
input[type="file"]
的透明度设置为0,悬浮在img
标签之上。通过给input
标签绑定change
事件,获取上传的文件,异步上传。
问题
通过ajax
的data
属性提交到后台的数据必须是键值对(key-value
)的形式,其中值value
不能为二进制数据。而通过input
的files
属性获取的上传文件被格式化为二进制形式。
解决方案
define([], function () {
/**
* 跨域异步post提交工具 使用Formdata,非iframe 提交
*/
var ifajax = function(_url){
var data = new FormData();
var obj ={};
obj.appendInput = function (input_obj) {
if (input_obj.files) {
for (var i = 0; i < input_obj.files.length; i++) {
data.append(input_obj.name, input_obj.files[i]);
}
} else {
data.append(input_obj.name, input_obj.value);
}
return this;
};
obj.submit = function (success,err) {
var xhr = new XMLHttpRequest();
var url = _url||"/club/apiv1/me/b64-upload";
xhr.open("POST", url, true);
xhr.setRequestHeader('Accept', '*/*');
xhr.onload = function () {
if (xhr.status == 200) {
if (xhr.responseText) {
try {
//console.log(xhr);
var json = $.parseJSON($.trim(xhr.responseText));
success && success(json);
} catch (e) {
err && err("parse error", xhr.responseText);
}
}
} else {
var message = xhr.responseText, code = xhr.status;
if (code === 413) {
message = "上传文件大小超过限制"
} else {
try {
var json = $.parseJSON(xhr.responseText);
message = json.message;
code = json.code;
} catch (e) {
}
}
err && err (code, message);
}
};
xhr.send(data);
return;
}
return obj;
};
return ifajax;
});
此外,还可以借助插件
ajaxFileUpload
实现异步上传文件
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。