美文网首页让前端飞
获取input上传的文件传给后端,兼容ie9

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

作者: Adoins | 来源:发表于2018-11-14 17:30 被阅读2次
    
    // 获取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;
    
        };
    

    <input class="file-input" name="file" multiple="multiple" type="file" id="importExcel">

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

    WechatIMG9.png

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


    WX20181114-171612@2x.png
    WechatIMG10.png

    相关文章

      网友评论

        本文标题:获取input上传的文件传给后端,兼容ie9

        本文链接:https://www.haomeiwen.com/subject/wfwjfqtx.html