Type = file, the change event can only be executed once.

Type = file, the change event can only be executed once.

Recently, I encountered a problem that the type = file change event can only be executed once in a project. Du Niang gave me a try and found that various solutions were provided, so I decided to record my thinking direction and the final solution.

At first, I helped my friends build a project. When I encountered File Uploading in the project and didn't think too much about it, I knocked on the Code. Nima, the upload was done well, and I was excited, a test, ei, what happened, why can't I upload files? The programmers are so anxious to find a solution. I started to find the solution. I calmed down and thought about the solution myself;

<Input type = 'file'/>. no matter whether the file is uploaded successfully or not, the added file is recorded, so no change event is executed. The cause is probably unknown, do it by hand. If I can clear the records, won't the event be triggered? I tried it, Nima, but it didn't succeed. Continue to find the method. If I replace the <input type = 'file'/> label and re-bind the change event, I tried it and succeeded. The following code is added:

<Form action = "/api/Index/Browse" enctype = "multipart/form-data" id = "form_Upload" method = "post">
<Input id = "fileUpload" type = "file" name = "file"> </form>

$ ('Input [id = fileUpload] '). click ();

Var count = 0;
$ ('Input [id = fileUpload] '). unbind (). change (function (){
$ ('# Form_Upload'). ajaxSubmit (options );

});

 

Var options = {
Success: function (data ){
// $ Scope. orderInfo = eval (data );
$ Scope. $ apply (function (){
$ Scope. orderInfo = eval (data );

// To avoid the change () Operation of the type = file control, start can only be executed once. change the control and re-bind the event.
Count ++;
$ ("# FileUpload "). replaceWith ('<input type = "file" id = "fileUpload" name = "file" >$ (' # fileUpload '). on ('change', function (){

$ ('# Form_Upload'). ajaxSubmit (options );
});
// End

$ Http. post (url, params). success (function (data ){
Do something
}, Function (){
Do something

});
});
}
};