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

php中文网
发布: 2016-06-24 11:46:20
原创
1387人浏览过



       今天下午帮同事改了这样一个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:90%" /><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,进行提交:

Cutout老照片上色
Cutout老照片上色

Cutout.Pro推出的黑白图片上色

Cutout老照片上色 20
查看详情 Cutout老照片上色



       

//多图片上传               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.









HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号