Processing the problem that the input cannot be cleared when the image is uploaded using form + input [type = & quot; file & quot;] on the same page, forminput

Forminput

This afternoon, I helped my colleagues modify this bug:

When uploading multiple images on a page, the input value cannot be used, so after each image is selected, it will be the same as the first image. The following results cannot be displayed:

Baidu has the following idea: first obtain the input, then empty it in a temporary form, and finally Delete the form.

The Code is as follows:

The first step is to generate the binding code for the Image Selection and display parts:

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> <input type =" text "name =" sort [] "style =" width: 90%; "/> </td> <input type =" text "name =" num [] "style =" width: 90%; "/> </td> '+' <td>  <div class =" file_box "> '+' <input type =" button "class =" btn "value =" select image "/> '+' <input type = "file" name = "fileLOGO" class = "file" id = "" style = "width: 80%; "onchange =" UploadImages (this) "/> '+' </div> </td> '+' <td> <a class =" del "href =" javascript: void (0) "> Delete </a> </td> </tr> ';

In the onchange = "UploadImages (this)" method, we pass in the input for this click to submit:

// Multiimage upload 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 ("Upload Failed ");} 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 ("parameter exception! ") ;}}; // Pass options to ajaxForm $ ('form'). ajaxSubmit (options );//}}

At that time, the problem was caused by ignoring the cleaning of input. Therefore, add the clearImages function:

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

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