How to Use the hidden iframe to upload objects without refreshing the file _ javascript skills

When the restore target points to the iframe name, the uploaded operation is handed over to the iframe for processing. In fact, before the emergence of ajax, the web application can also be refreshed, at that time, IFrame was mostly used to achieve this. Of course, after the emergence of Ajax, people rushed to the Ajax camp, and iFrame was no longer interesting. However, it is a good choice to use iFrame to upload files without refreshing.

The solution is to use a hidden iframe to handle upload operations. I use ReactJS, amazeui, and nodejs.

1. When html target points to the iframe name, the uploaded operation is handed over to iframe for processing.

2. JS processing when the file is selected, submit the form

UploadSupplyer: function () {var path = document. all. fileUp. value; if (! Path) {return false;{('.loadinfo'{.html ('
Uploading files...
'). RemoveClass ("none"); $ (' # supplyformFile '). submit ();},

3. The node. js server processes the page because it is a node. js server domain and there is a cross-origin issue in iframe. Therefore, the H5 postMessage method is required to pass parameters to the form page outside the iframe.

var fname = req.files.fileUp.path.replace("publicfiles", "").replace("public/files/", "");res.writeHead(200, {'Content-type' : 'text/html'});res.write('《script》');res.write('window.parent.postMessage("'+fname+'","*");');res.end('《script》');

4. JS processing upload results

Window. addEventListener ('message', function (e) {var fname = e. data; $ ('# supplyfile '). val (fname); $ (". loadinfo "). addClass ("none"); $ (". successinfo "developer.html ("
File Uploaded
"). RemoveClass ("none"); setTimeout (function () {$ (". successinfo "). addClass ("none") ;}, 2000); $ ("# supplyfile_p" ).html ('Supplier confirmation way') ;}, false );

The above section describes how to use the hidden iframe to upload a file without refreshing. I hope it will help you!