文件上传，三种方式

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=<
4000
span class="hljs-string">"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