iframe_javascript スキルを非表示にして更新不要のファイル アップロード操作を実装する

実際、ajax が登場する前は、Web アプリケーションもリフレッシュ不要でした。これは主に IFrame を通じて行われていました。もちろん、Ajax の登場後、人々は Ajax 陣営に集まり、iFrame の人気は低くなりました。ただし、iFrame を使用してファイルを更新せずにアップロードするのは、確かに良い選択です。

解決策は、ReactJS、amazeui、nodejs を使用して、非表示の iframe を通じてアップロード操作を処理することです。

1.html ターゲットは iframe の名前を指します。これは、アップロード操作が処理のために iframe に渡されることを意味します。

<form id="supplyformFile" 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> 选择要上传的文件
</button>
<input type="file" id="fileUp" onChange={this.UploadSupplyer} name="fileUp" />
</div> 
<div id="supplyfile_div"></div>
</form>
<iframe id="frameFile" name="frameFile" style={{display: 'none'}}></iframe>
<input type="hidden" id="supplyfile" />

2.JS 処理は、ファイル選択後にフォームを送信します

UploadSupplyer:function(){
var path = document.all.fileUp.value;
if(!path){return false;}
$('.loadinfo').html('<p>文件上传中...</p>').removeClass("none");
$('#supplyformFile').submit();
},

3.nodejs サーバー処理。処理ページは nodejs サーバー ドメインであるため、iframe 内でクロスドメインの問題が発生するため、H5 postMessage メソッドを使用して、外部のフォーム ページにパラメーターを渡す必要があります。 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処理

window.addEventListener('message',function(e){
var fname=e.data;
$('#supplyfile').val(fname);
$(".loadinfo").addClass("none");
$(".successinfo").html("<p>文件上传成功</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+'">供应商确认单</a>');
},false);

以上はiframeを非表示にしてファイルを更新せずにアップロードする操作について編集者が紹介したものです。皆様のお役に立てれば幸いです。