Ajax方式实现文件上传

XMLHttpRequest Level 2添加了一个新的接口FormData，使用FormData的可以异步上传一个二进制文件.
许多主流浏览器都支持 FormData 对象，比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。

FormData 具体信息参考：https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/FormData

页面文件

<form id="uploadForm" enctype="multipart/form-data" class="form-horizontal form-bordered">


<div> <label>请选择需要上传的组件:<br /> <a href="javascript:;" class="btn red" id="importPlugin"> <span class="glyphicon glyphicon-download-alt"></span> 打开 </a> <span id="fileNameDes"></span> </label> <input type="file" style="display: none" id="fileSelect" name="userfile" accept="application/x-compressed"/> </div>
<div>
... ...
</div>

</form>

js脚本

    $("#importPlugin").click(function(){
        $("#fileSelect").click();
    });

    //检测选择文件事件
    $("#fileSelect").change(function(){
        var fileSelector = $("#fileSelect")[0].files;       
        $('#fileNameDes').text(fileSelector[0].name);
       
        if(fileSelector.length > 0) {
            var file = fileSelector[0];
            var nameArr = file.name.split('.');
            if(nameArr[1] != 'tgz'){
                hint_func('error','','仅支持tgz文件上传,请重新选择正确文件');                
                return false;
            }
            else {
                var formData = new FormData($( "#uploadForm" )[0]);
                var obj = document.getElementById("FileMD5");

                $.ajax({
                    url: 'index.PHP/upload/up',type: 'post',data: formData,async: false,cache: false,contentType: false,processData: false,success: function (datas) {
                        var result = JSON.parse(datas);
                        
                        if(code == 0){
                            ......                      

                        }
                        else{
                            ......
                        }

                    },error: function (datas) {
                        ......
                    }
                });
            }
        }
    });

控制器按照正常表单接收流程即可。