获取input上传的文件传给后端,兼容ie9


// 获取input上传的文件,兼容ie9

    function getInputFile(inputId) {

        // 获取文件对象(该对象的类型是[object FileList],其下有个length属性)

        var fileEle =  $('#'+inputId)[0];

        var fileObj = null;

        if (fileEle.files) {

            // 如果文件对象的length属性为0,就是没文件

            if (fileEle.files.length === 0) {

                console.log('没选择文件');

                return false;

            };

            fileObj = fileEle.files[0];

        } else {

            /*

                低版本IE由于JS安全问题,不允许JS访问本地文件,所以无法获取files

                对于低版本的IE可以使用ActiveXObject获取文件对象, 但是默认情况下

                ActiveXObject为不可用的, 所以要想使用此对象要先启用设置, 即:

                    Tools(工具) / Internet options(选项) / Security(安全) / Custom level(自定义级别)

                    找到"Initialize and script ActiveX controls not marked as safe for scripting"

                    设置为"Enable(not secure)"即可.

            */

            var fso = new ActiveXObject("Scripting.FileSystemObject");

            /*

                1\. 获取文件路径

                    出于安全性的考虑,低版本IE上传文件时屏蔽了真实的本地文件路径,

                    以C:\fakepath\**取而代之, 所以默认情况下通过fileEle.value 不能获取到

                    文件的真实路径.

                    如果想获取真实路径, 有两种方式:

                        1\. 通过设置IE的安全设置, 即:

                            Tools(工具) / Internet options(选项) / Security(安全) / Custom level(自定义级别)

                            找到"Include local directory path when uploading files to a server"

                            设置为的"Enable"

                        2\. 使用JS获取, 即:

                            fileEle.select().blur();

                            var filePath = document.selection.createRange().text;

            */

            fileEle.select();

            fileEle.blur();

            var filePath = document.selection.createRange().text;

            /*

                FileExists:  判断 文件是否存在

                GetFile: 获取文件对象

            */

            if (fso.FileExists(filePath)) {

                fileObj = fso.GetFile(filePath);

            }

            /*

                通过文件对象可以获取文件的基本信息, 如:

            */

            console.info("文件类型:" + fileObj.type);

            console.info("文件名称:" + fileObj.name);

            console.info("文件大小:" + fileObj.size);

        }

        console.log(fileObj)

        return fileObj;

    };

通过var file = getInputFile('importExcel');获取文件

WechatIMG9.png

传给后端需要将其放在FormData中,并且设置请求头processData 、 contentType均为false,即可以二进制流传输文件给服务器,例如



WechatIMG10.png

你可能感兴趣的:(获取input上传的文件传给后端,兼容ie9)