H5 移动端Input File 文件上传以及后端接收
2017-04-26 本文已影响3913人
嘘_187d
前端部分
前端部分主要用ajax 上传Base64字符串码
$("#fileInput").live("change", function() {
var path = $(this).val();
var showfilename = $(this).parent().parent().prev(); //展示文件名称的view
showfilename.show(); //显示展示名称
showfilename.text(this.files[0].name);
var reader = new FileReader();
reader.readAsDataURL(this.files[0]);
reader.onload = function(e) {
console.log(e.target.result)
mui.ajax(http + _data.upload2, {
data: {
file: e.target.result,
fileModuleName: "saler",
},
dataType: 'json', //服务器返回json格式数据
type: 'post', //HTTP请求类型
timeout: timeOut,
success: function(data) {
//获取返回的上传成功的数据
},
error: function(xhr, type, errorThrown) {
//异常处理;
}
});
};
});
后端部分
后端部分获取Base64之后解析出来,根据不同的格式进行再构造,并传给前端,主要的是格式问题,故格式整合如下(图片类型不变,变得是其他文件类型)
word doc后缀,type为msword
doc.jpg
以此类推
word后缀docx---tyoe为 vnd.openxmlformats-officedocument.wordprocessingml.document
excel后缀xls---vnd-ms-excel
excel后缀xlsx----vnd.openxmlformats-officedocument.spreadsheetml.sheet
pdf后缀 pdf----pdf
txt后缀 ---text/plain
ppt后缀----vnd.openxmlformats-officedocument.presentationml.presentation