In fact, before ajax appeared, web applications could also be refresh-free, and most of them were able to do this through IFrame. Of course, after Ajax appeared, people rushed to Ajax's camp, and iFrame was not popular. But using iFrame to upload files without refresh is indeed a good choice.
The solution is to handle upload operations through a hidden iframe. I use ReactJS, amazeui, nodejs
The target points to the name of the iframe, which means handing over the uploaded operation to the iframe for processing.
<form name="formFile" method="post" target="frameFile"
encType="multipart/form-data">
<div className="am-form-file">
<button type="button" className="am-btn am-btn-default am-btn-sm">
<i className="am-icon-cloud-upload"></i> Select the file to upload
</button>
<input type="file" onChange={} name="fileUp" />
</div>
<div ></div>
</form>
<iframe name="frameFile" style={{display: 'none'}}></iframe>
<input type="hidden" />
Processing when file selection is selected
UploadSupplyer:function(){
var path = ;
if(!path){return false;}
$('.loadinfo').html('<p>File uploading...</p>').removeClass("none");
$('#supplyformFile').submit();
},
Server processing, because the processing page is the nodejs server domain, there are cross-domain problems in the iframe, so the postMessage method of H5 needs to be used to pass parameters to the form page outside the iframe.
var fname = ("publicfiles", "").replace("public/files/", "");
(200, {'Content-type' : 'text/html'});
('<script>');
('("'+fname+'","*");');
('</script>');
Process the upload results
('message',function(e){
var fname=;
$('#supplyfile').val(fname);
$(".loadinfo").addClass("none");
$(".successinfo").html("<p>File upload successfully</p>").removeClass("none");
setTimeout(function() { $(".successinfo").addClass("none");}, 2000);
$("#supplyfile_div").html('<span class="am-icon-file-o"></span> <a target="_blank" href="'+hosts+'/files/'+fname+'">Supplier confirmation form</a>');},false);
The above is what the editor introduced to you to achieve refresh-free uploading of files through hidden iframes. I hope it will be helpful to everyone!