VUE上传图片组件遇到的问题

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();
            })
        },
}
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,098评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,213评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,960评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,519评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,512评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,533评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,914评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,574评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,804评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,563评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,644评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,350评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,933评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,908评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,146评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,847评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,361评论 2 342

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,580评论 18 139
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,220评论 1 41
  • 背景描述 有这么一个需求:一个表单,有十几个input,一个文件上传的input,可以上传一张图片。 要求上传图片...
    Java_or_PHP阅读 4,524评论 0 5
  • 上班8年了,毕业也正好8年了。有了房贷,也有了宝宝,人生应该是充满斗志的,应该是信心满满的,可是为什么提不起劲...
    极简生活开始阅读 139评论 0 0
  • 我侄子,自从上初中后,就一反常态,各种问题鱼贯而来,先是住校并养成了一些不良习惯,再是成绩逐渐下降,父母怨言渐多...
    大沙河旁阅读 280评论 0 1