3种方式 :
- HTML5 FormData : 不支持IE 8,可以得到文件大小
- jquery.form.js : 支持IE8,不能得到文件大小
- webUploader : 支持IE8,可得到文件大小,限制文件大小
一、HTML5 FormData & ajax 提交 (不支持 IE8 )
var formData = new FormData();
formData.append("fileType", fTval);
formData.append("file", $('#updataimgfile')[0].files[0]);
$.ajax({
url: '/analystui/service/file/uploadBg',
type: 'post',
data: formData,
success: function(data) {},
error: function(error){}
})
二、 jquery.form.js (支持 IE8, 不能限制文件大小 )
- form 标签标记
html:
<form id="addBgForm">
<input type="file" class="updataimgfile" name="file">
</form>
- 提交方式与 ajax 格式类似:
$("#addBgForm").ajaxSubmit({
method: 'POST',
data: sendbgOpt, //添加多余的条件 obj 格式
url: '/analystui/service/file/uploadBg',
success: function(data) {},
error: function(error){}
})
IE 上传文件默认会下载 txt 文档,返回结果。后台需要修改返回格式为 json 字符串, 前端再解析(JSON.parse(data))。
三、webUploader (支持 IE8,默认使用 h5上传,若不支持则使用 flash)
- html
<div id="uploader-demo">
<div id="filePicker" class="sel-file">选择文件</div>
</div>
- js
var uploader = WebUploader.create({
method: 'POST',
formData: { //选择文件后,根据文件添加参数条件
fileType: '',
reqFlag: ''
},
//fileNumLimit:
//runtimeOrder: 'flash' 插件自动调用 html5/flash, 不用强制设置
auto: true,
//swf: './Uploader.swf',
swf: '/analystui/scripts/libs/webuploader/Uploader.swf', //必须为绝对路径,IE下才可以读到
server: '/analystui/service/file/uploadBg',
pick: '#filePicker',
accept: {
title: 'image',
extensions: 'jpg,jpeg,png,bmp,gif'
},
fileSingleSizeLimit : 5*1024*1024,
fileSizeLimit : 5*1024*1024
})
uploader.on('error',function(file){
//文件类型错误
requestError('图片格式不正确,请检查图片是否为jpeg、jpg、bmp、png、gif格式');
return;
})
uploader.on('fileQueued', function(file) {
if(file.size > 5*1024*1024){
requestError('图片过大:最大支持上传5M');
return;
}
})
uploader.on('uploadBeforeSend',function(obj,data,header){
//添加更多的条件 data 即为 formData
var myfileType=obj.file.name.split('.');
var fTval=myfileType[myfileType.length-1];
var myrandomnum='tmd'+Math.random()*10000+'pyy'+Math.random()*10000;
data.fileType = fTval;
data.reqFlag = myrandomnum;
})
uploader.on('uploadSuccess',function(file,data){
})
uploader.on('uploadError',function(file,reason ){
})
swf : IE8 下必须使用绝对路径:
添加成功:
IE8 下元素高度很小,点不到。
原因: swf 路径错误,必须为绝对路径,注意是正斜杠
2-1
2-2
———–end