// 获取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
网友评论