基于jquery的异步上传，异步提交

1.明确需求，我需求是，需要选择多个文件，然后点击开始上传，把选中的文件上传，然后html默认上传文件的的input样式不好看，需要更换一个样式。

2.开始动手，首先，先更换样式，我的思路是隐藏input标签，另外的节点绑定这个隐藏标签的点击，html代码里面，有<a>标签和一个<input type="file" style="display:none;">，点击<a>标签可触发点击<input type="file" style="display:none;" >的点击事件。

3.然后，jquery的fileupload插件，在依赖JQuery的js基础上，再依赖以下三个重要的js包，其他包没啥用。自行到官网下载（ http://blueimp.github.io/jQuery-File-Upload/）。

<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>

4.上传代码：

 

 var allsize = 0;    //文件总大小
  var fileNameArray=[];   //文件名数组
$("#fileupload").fileupload({     //绑定添加文件按钮事件
        url:"files/upload",     //文件上传地址，当然也可以直接写在input的data-url属性内
        //dataType: 'json',     //可选用json格式提交数据
        formData:{filetype:filetype},     //需要绑定的数据，可要可不要。
        add: function(e, data) {     //当点击添加文件的时候所调用的方法，
            //限制每张图片大小
            if(data.files[0].size >= 1572864){
                alert("每张图片大小不大于1.5M");
                return false;
            }
            //限制最多只能上传15张图片
            if(fileNameArray.length>=15 ||data.originalFiles.length>=15){
                alert("最多只能上传15个文件");
                return false;
            }
            //判断文件是否存在
            if( $.inArray(data.files[0].name, fileNameArray) != -1){
                alert("不允许上传同名文件或不允许上传该类型文件");
                return false;
            }
            fileNameArray.push(data.files[0].name);     //把文件名加入到文件名数组里面
            allsize =allsize+ data.files[0].size;               //文件总大小
            $('.rz-table-ul').append('<li><span>'+data.files[0].name+'</span><span>'+bytesToSize(data.files[0].size)+'</span><span>未上传</span></li>');     //显示到上传列表里面，
            $('.allsize').html(bytesToSize(allsize));          //显示文件总大小
            $('#startUpload').click(function(){     //绑定开始上传按钮事件
                data.submit();
            });
        },
        done:function(e,result){
            //done方法就是上传完毕的回调函数，其他回调函数可以自行查看api
            //注意result要和jquery的ajax的data参数区分，这个对象包含了整个请求信息
            //返回的数据在result.result中，假设我们服务器返回了一个json对象
            console.log(JSON.stringify(result.result));
        }

5.然后，就是后台接收和处理请求了（这部分不属于jquery讨论范围咯）。