Javascript implements iframe without refreshing new file uploads

Many systems will have the image upload function. However, if you submit an image using a form, the page will be refreshed every time;
Today, I will share a method to use iframe to upload files without refreshing the code:

Html

<Form class = "form-horizontal text-sm" id = "upload" name = "upload []" target = "frm" action = "/ERP/files/upFiles" method = "post" enctype = "multipart/form-data">
<Input type = 'file' id = "file" name = "files []" accept = ". csv" multiple = "multiple"/>
<Input type = "hidden" name = "MAX_FILE_SIZE" value = "10485760"/> // restrict the file size
</Form>
<Iframe id = 'FRM' name = 'FRM' style = "display: none;"> </iframe>

Code

Javascript

<Script type = "text/javascript">
Function callback (res ){
Console. log (res); // returned object
 }
Var frm = $ ("# frm ");
Frm. load (function (){
Var wnd = this. contentWindow;
Var str = values (wnd.doc ument. body). find ("pre" contents .html ();
Str = JSON. parse (str); // converts json string data to an Object
Callback (str );
});
</Script>

Principle: Students who carefully read this document find that the iframe here is hidden. This method uses the hidden iframe to submit data, so the original page will not be refreshed;