开发者社区> soledad_lhc> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

处理同一页面中借助form+input[type="file"]上传图片出现的input无法清空问题

简介:        今天下午帮同事改了这样一个bug:                       在一个页面中对多张图进行上传时,由于input的value无法情况的问题,导致每次选完图片后,都跟第一张图片一样,无法出现如下效果:                 ...
+关注继续查看



       今天下午帮同事改了这样一个bug:

          

           在一个页面中对多张图进行上传时,由于input的value无法情况的问题,导致每次选完图片后,都跟第一张图片一样,无法出现如下效果:


        



          

                百度了下思路:先将input取到,然后放到一个临时form里面清空,最后删掉form.



          代码如下:

  

          首先是生成图片选择和显示部分的绑定代码:


        

 var img_tmp = '<tr><td><input type="text" name="code" value="" style="width: 90%; display: none;"><input type="text" name="title[]" style="width:90%;" /></td><td><input type="text" name="sort[]" style="width:90%;" /></td><td><input type="text" name="num[]" style="width:90%;"/></td>' +
                                                '<td><img alt="" src="" id="" name="img[]" style="max-width: 100px; max-height: 100px; display: block; float: left; border: 1px solid #E6E7EB;" /><div class="file_box">' +
                                                '<input type="button" class="btn" value="选择图片" />'+
                                                '<input type="file" name="fileLOGO" class="file" id="" style="width: 80%;" onchange="UploadImages(this)" />' +
                                                '</div></td>' +
                                                '<td><a class="del" href="javascript:void(0)">删除</a></td></tr>';


           在onchange="UploadImages(this)" 这里的方法中,我们传入本次点击的input,进行提交:



       

//多图片上传       
        function UploadImages(FileInput) {
            //var isno = fileChange($(FileInput));
            //if (isno == undefined) {
            var options = {
                type: "POST",
                url: '../Handler/AshxUploadFile.ashx?type=Images',
                success: function (msg) {
                    if (msg == "error") {
                        clearImages($(FileInput));
                        showerrortip("上传失败");
                    } else {
                        if (msg != "errortype") {
                            clearImages($(FileInput));
                            $(FileInput).parent().prev("img").attr("src", strPic + msg);
                            clearImages($(FileInput));
                            $(FileInput).attr("style", "");

                        }
                    }

                }, error: function (msg) {
                    clearImages($(FileInput));
                    $(FileInput).attr("style", "");
                    showerrortip("参数异常!");
                }
            };
                // 将options传给ajaxForm
                $('form').ajaxSubmit(options);
               

            //} 

        }



          当时因为忽略了对input的清理,才导致了那个问题,为此,加入clearImages函数:



              

function clearImages(selector) {
            var fi;
            var sourceParent;

            if (selector) {
                fi = $(selector);
                sourceParent = fi.parent();
            }
            else {
                return;
            }

            $("<form id='tempForm'></form>").appendTo(document.body);

            var tempForm = $("#tempForm");

            tempForm.append(fi);
            tempForm.get(0).reset();

            sourceParent.append(fi);
            tempForm.remove();


        }

          这样,就利用临时form清空了input.









版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
#飞天·运维# 优云软件亮相2017云栖大会,旗下全线产品首次完整展示
优云软件亮相2017云栖大会,旗下全线产品首次完整展示
4204 0
追求代码质量: JUnit 4 与 TestNG 的对比
经过长时间积极的开发之后,JUnit 4.0 于今年年初发布了。JUnit 框架的某些最有趣的更改 —— 特别是对于本专栏的读者来说 —— 正是通过巧妙地使用注释实现的。
753 0
【故障处理】队列等待之enq: TX - row lock contention
【故障处理】队列等待之enq: TX - row lock contention 1  BLOG文档结构图   2  前言部分 2.
1368 0
无法从此磁盘使用"Install 10.12 Developer Preview"应用程序.
有个Numbers文件,在Windows上打不开(你可以使用压缩软件打开,但只能看到几张缩略图,其它的文件如.iwa格式的根本查看不了),也找不到合适的转换工具,就想到自己还安装了一个Mac OS的虚拟机,就打开虚拟机试试吧。
635 0
mysql配置完半同步复制之后报错[ERROR] The server quit without updating PID file
修改配置,MySQL启动报:[ERROR] The server quit without updating PID file     [root@localhost mysql]# /etc/init.
1113 0
PCIe-8604 USB3.0图像采集卡无需额外供电机器视觉智能相机网卡
PCIe-8604是一块4口USB 3.0主控卡,专为工业和视觉相关应用设计。USB 3.0,或称作高速USB,是一项新兴的总线技术,10倍于USB2.0的传输速度,尤其适用于高速数据存储和图像设备。
5930 0
[解题报告]【第25题】求所有 1 到 5 的全排列 | 令人窒息的 for 循环
[解题报告]【第25题】求所有 1 到 5 的全排列 | 令人窒息的 for 循环
0 0
FastAPI 学习之路(二十九)使用(哈希)密码和 JWT Bearer 令牌的 OAuth2
FastAPI 学习之路(二十九)使用(哈希)密码和 JWT Bearer 令牌的 OAuth2
0 0
+关注
soledad_lhc
csdn博客:http://blog.csdn.net/lhc1105
文章
问答
文章排行榜
最热
最新
相关电子书
更多
OPEN SOURCE IN A DATA-DRIVEN WORLD
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载