iframe_javascript 기술을 숨겨 새로 고침 없는 파일 업로드 작업 구현

사실 Ajax가 등장하기 전에는 웹 애플리케이션도 새로 고침이 필요 없었습니다. 당시에는 대부분 IFrame을 통해 이루어졌습니다. 물론 Ajax가 등장한 후 사람들은 Ajax 진영으로 몰려들었고, iFrame의 인기는 줄어들었습니다. 그러나 iFrame을 사용하여 새로 고치지 않고 파일을 업로드하는 것은 실제로 좋은 선택입니다.

해결책은 숨겨진 iframe을 통해 업로드 작업을 처리하는 것입니다. 저는 ReactJS, amazeui, nodejs를 사용합니다

1.html target은 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 메소드를 사용하여 외부 양식 페이지에 매개변수를 전달해야 합니다. 아이프레임

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을 숨겨 새로고침 없이 파일을 업로드하는 작업에 대한 편집자의 소개입니다. 모두에게 도움이 되길 바랍니다!