无插件AJAX上传文件

之前项目用的updoladify插件，但是不知道怎么突然就接收不到data返回值，很蛋疼，于是就放弃使用插件上传。

这里用的HTML5上传EXCEL，所以浏览器支持HTML5就可以使用。

首先是创建HTML标签，设置STYLE隐藏INPUT标签，按钮写个样式。

<a class="btn" id="insertXls">导入</a>
<input type="file" style="opacity: 0;display:none" accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" name="files" id="xlsfile" />

然后是JS

 $("#insertXls").click(function () {
            $('#xlsfile').click();
        });
        $('#xlsfile').on('change', function () {
            var $file = document.getElementById("xlsfile").files[0];
            var $result = checkup(document.getElementById("xlsfile").files[0], 1);
            if ($result !== -2) {
                var formdata = new FormData();
                formdata.append("files", $file);
                $.ajax({
                    url: '/common/UpLoadFile?key=xls',
                    type: 'POST',
                    data: formdata,
                    dataType: "json",
                    processData: false,
                    contentType: false
                }).done(function (data) {
                    var json = JSON.stringify(data);
                    if (data.success) {
                        //do something
                    } else {
                        //do something
                    }
                });
            }
        });
        function checkup($up_file, $size) {
            var $filesize = $up_file.size;
            var $filetype = $up_file.type;
            var $_type = new Array("vnd.ms-excel", "vnd.openxmlformats-officedocument.spreadsheetml.sheet");
            var $filetype_arr = $filetype.split("/");
            if ($filetype_arr[0] === "application") {
                if ($.inArray($filetype_arr[1], $_type) !== -1) {
                    //验证文件类型
                } else {
                    //do something
                    return -2;
                }
            };
        };

后台对应写个上传方法即可。