文件上传之ie10及以下不能删除input的value值
2018-06-28 本文已影响28人
5df463a52098
在文件上传时候,经常要手动删除input[type=file]上传的值,或者文件上传超过限制大小的时候重新上传的时候不能上传的问题
在谷歌、火狐上,我们我们直接设置value为空即可,但是ie10以下浏览器上不能解决。
html:
<input type='file' id="uploadInput" class="upfile" @change="fileChange">
js:
fileChange (evt) {
if (!evt.target) {
return
}
let target = evt.target
let isIE = false
if (window.addEventListener) {
isIE = false
} else if (window.attachEvent) {
isIE = true
}
let fileSize = 0
if (isIE && !target.files) {
let filePath = target.value
let fileSystem = new ActiveXObject('Scripting.FileSystemObject')
let file = fileSystem.GetFile (filePath)
fileSize = file.Size
} else {
fileSize = target.files[0].size
}
// let size = fileSize / 1024 // (10*1024*1024)
if (fileSize > 10 * 1024 * 1024) {
this.$Modal.warning({
title: '提示框',
content: '上传文件最大为10M,请重新上传。',
closable: true
})
let isIE10 = false
if (window.navigator.userAgent.indexOf('MSIE') >= 1) { // 判断ie10以及以下
isIE10 = true
} else {
isIE10 = false
}
let uploadInput = document.getElementById('uploadInput')
if (isIE10) {
// 关键部分ie10以下
let form = document.createElement('form')
let beforInput = uploadInput.nextSibling
let parentInput = uploadInput.parentNode
form.appendChild(uploadInput)
form.reset()
parentInput.insertBefore(uploadInput, beforInput)
} else { // 谷歌、火狐和ie11、edge
target.value = ''
}
// 关键部分
return
}
let name = target.value
let fileName = name.substring(name.lastIndexOf('.') + 1).toLowerCase()
if (fileName !== 'jpeg' && fileName !== 'png' && fileName !== 'jpg') {
this.$Modal.warning({
title: '提示框',
content: '请上传JPG、JPEG、PNG格式的文件',
closable: true
})
target.value = ''
return
}
},
解决方式:创建一个表单元素,把input放进去,重置表单,再把input取出来你放到原来的地方。
总结代码:
function resetInputValue(){
let isIE10 = false
let uploadInput = document.getElementById('uploadInput')
if (window.navigator.userAgent.indexOf('MSIE') >= 1) { // 判断ie10以及以下
isIE10 = true
} else {
isIE10 = false
}
if (isIE10) {
let form = document.createElement('form')
let beforInput = uploadInput.nextSibling
let parentInput = uploadInput.parentNode
form.appendChild(uploadInput)
form.reset()
parentInput.insertBefore(uploadInput, beforInput)
} else {
uploadInput.value = ''"
}
}