1、向服务器传送的参数放在input的name里
2、change事件只触发一次
该问题并不是由于change事件失效造成的,是因为uploadByIframe事件中,会把原来的file元素替换成新的file元素,所以之前绑定的change事件就失效了。
重新绑定change事件就可以解决:
$("#" + fileId).change(function() {
self.uploadByIframe(self.opt);
})
或者增加事件绑定事件监听change事件:
使用jQuery自带的 delegat 方法 --> jQuery 事件 - delegate() 方法
mounted() {
const self = this;
if(this.judgeIE9) {
$("body").delegate(".uploadImg-parent #upFile","change",function() {
self.uploadByIframe(self.opt);
})
}
},
参考链接: 上传文件或图片 type=file change事件只触发一次
3、在IE9下input事件需要双击才能打开上传图片
可以使用一个label标签,labe的for属性指向file文本框。
<label for="upFile">{{uploadText}}</label>
<form id="upFileForm">
<input name="file" @change='addImg' id="upFile" type="file" accept=".jpg,.png">
</form>
每次上传时,点击label标签,就可以直接触发file控件。
设置CSS时,设置input的样式:
input {
opacity: 0;
filter:alpha(opacity=0);
z-index:1;
display: none;
... ...
}
设置label标签覆盖input标签即可。
4、chrome等浏览器出现不能连续上传同样图片
每次上传之后,重置form,解决不能连续上传两张相同图片的问题。
$('#upFileForm')[0].reset();
5、IE9下上传图片不成功时首先检测代码中是否有console对象,console对象在IE9中会阻塞程序的执行!!!
附使用iframe上传图片代码:
mounted() {
const self = this;
if(this.judgeIE9) {
$("body").delegate(".uploadImg-parent #upFile","change",function() {
//alert("test");
self.uploadByIframe(self.opt);
})
}
},
methods: {
uploadByIframe(opt) {
const self = this;
var _opt = {
url:"",
dataType:"json",
fileInputId: "",
extraData: null
}
$.extend(true, _opt, opt);
var fileId = _opt.fileInputId,
extraData = _opt.extraData;
const imgName = document.getElementById(fileId).value;
var ifraFlag = "iframeForUpload" + new Date().getTime();
// var ifra = $('<iframe name="' + ifraFlag + '" id="' + ifraFlag + '" style="display: none"></iframe>');
var ifra = $('<iframe name="' + ifraFlag + '" id="' + ifraFlag + '" style="display: none"></iframe>');
$("body").append(ifra);
var fileInputParent = $("#" + fileId).parent();
var form = $('<form style="display:none"></form>');
form.attr({
method: "post",
enctype: "multipart/form-data",
action: _opt.url,
target: ifraFlag
});
form.append($("#" + fileId));
$("body").append(form); //ie必须得渲染在页面了才能submit chrome不需要这一步的
form.submit();
var returnFileInput=form.find("#" + fileId).clone();//复制一份新的 还回去
fileInputParent.append(returnFileInput); //append走了 上传之后还得还回去
// 手动添加onchange事件,解决onchange触发一次就失效的问题
form.remove();
// $("#" + fileId).change(function() {
// console.log('change');
// self.uploadByIframe(self.opt);
// })
$("#" + ifraFlag).load(function() {
var iframeContents = this.contentWindow.document.body.innerHTML,resData;
switch(_opt.dataType){
case "text":
resData = iframeContents;
break;
case "json":
try{
resData = JSON.parse(iframeContents);
}catch(err){
resData = null;
}
break;
}
if(iframeContents.search("\"status\":200") >0 &&iframeContents.search("key") > 0) {
// 请求成功后执行的操作
}
$(this).remove();
})
},
}