Ajax方式实现文件上传

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/liuruiqun/article/details/52211137

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) {
                        ......
                    }
                });
            }
        }
    });

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