博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
处理同一页面中借助form+input[type="file"]上传图片出现的input无法清空问题...
阅读量:6961 次
发布时间:2019-06-27

本文共 2228 字,大约阅读时间需要 7 分钟。

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

          

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

        

          

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

          代码如下:

  

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

        

var img_tmp = '' +                                                '
' + '
'+ '
' + '
' + '删除';

           在οnchange="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;            }            $("
").appendTo(document.body); var tempForm = $("#tempForm"); tempForm.append(fi); tempForm.get(0).reset(); sourceParent.append(fi); tempForm.remove(); }

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

你可能感兴趣的文章
直接插入排序
查看>>
springmvc4.x返回json数据
查看>>
iOS逆向之三-authorized_keys ssh登录越狱手机免验证设置
查看>>
解决linux的-bash: ./xx: Permission denied
查看>>
Laravel 第三方登陆之 Socialite Providers
查看>>
Ubuntu14.10 remove ibus 之后
查看>>
Spring第一天
查看>>
springMVC笔记系列(20)——控制器实现详解(下)
查看>>
Linux文件上传下载,rz和sz
查看>>
在as3中使用嵌入字体
查看>>
How processor, assembler, and programming langu...
查看>>
五种方法解决Magento中jQuery和Prototype兼容性
查看>>
PPT模板网站
查看>>
InSave 隐私政策
查看>>
[Linux command]批处理注释
查看>>
delphi 操作文件时间的函数
查看>>
nodjs 生产环境及升级问题
查看>>
JS判断客户端是否是iOS或者Android手机移动端
查看>>
Swing控件
查看>>
快速JavaEE轻量级框架&公用业务模块 设计&实现 6.1 - DAO测试
查看>>