文件上传，三种方式

3种方式 ：

1. HTML5 FormData : 不支持IE 8，可以得到文件大小
2. jquery.form.js ： 支持IE8，不能得到文件大小
3. 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 ){
})

1. swf : IE8 下必须使用绝对路径：
   
   添加成功：
   

2. IE8 下元素高度很小，点不到。
   原因： swf 路径错误，必须为绝对路径，注意是正斜杠
   2-1
   2-2

———–end