Handle the problem that the input cannot be cleared when uploading images using form input[type='file'] on the same page_html/css

Handle the problem that the input cannot be cleared when uploading images using form input[type='file'] on the same page_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:46:20

Original

1434 people have browsed it

Helped a colleague to correct a bug this afternoon:

In When uploading multiple pictures on one page, due to the problem that the input value cannot be adjusted, every time after selecting a picture, it will be the same as the first picture, and the following effect will not appear:

Arrive, Then put it in a temporary form and clear it, and finally delete the form.
The first is to generate the binding code of the selection and display part of the picture:

🎜>

In the onchange="UploadImages(this)" method here, we pass in the input of this click and submit it:

 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>';

Copy after login

That led to that problem. To this end, add the clearImages function:

//多图片上传               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);                           //}         }

Copy after login

In this way, the input is cleared using the temporary form. >

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();        }

Copy after login