htmlページ実装ファイルアップロード

業務の需要のため、ブラウザを通じてローカルファイルをサーバーにアップロードする機能を実現する必要があります.これまでやったことがないので、探求を経てこの機能を実現しました.ここではフロントエンドの実現だけを紹介し、バックグラウンドの受信、検証、保存は紹介しません.
このプロセスは次のとおりです.
1、ローカルファイルを読み込む
2、サーバーとの接続を確立する(AJAXを使用する)
3、ヘッダ情報とファイルフローをアップロードする
4、サーバーの応答待ち後、結果を表示する
 
ローカルファイルを読み込み、ページで[参照](Browse)をクリックすると、ファイル選択ダイアログボックスがポップアップされ、ラベルを使用します.指定した接尾辞のファイルをフィルタリングする場合は、acceptプロパティを追加します.rarファイルのみを選択できる場合は

jsでファイルを読み込むにはFileReaderが必要です

var fReader = new FileReader();
fReader.onload=function(e){
   //    
   xhreq.send(fReader.result);
}
fReader.readAsArrayBuffer(uploadFile.files[0]);

ファイルの読み取りが完了すると、onload関数がコールバックされ、ファイルの内容はfReaderに保存されます.resultなのでonloadでサーバーにデータを発生すればいいです
サーバと接続を確立し、jsコードは以下の通りです.

function createHttpRequest()
 {
	 var xmlHttp=null;
     try{
 	    // Firefox, Opera 8.0+, Safari
 	    xmlHttp=new XMLHttpRequest();
 	 }catch (e){
 	    // Internet Explorer
 		try{
 	        xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
 	    }catch (e){
 		try{
 		    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
 	        }catch (e){
 	            alert("        AJAX！");
 	        }
 	    }
 	}
    return xmlHttp;
 }

Openを呼び出すと本当にサーバとの接続が確立されます.最初のパラメータは要求方式で、2番目のパラメータは対応するURLです.

xhreq.open("POST","/upload/file",true);
xhreq.setRequestHeader("Content-type", "application/octet-stream"); //   
xhreq.setRequestHeader("Content-length", fwFile.files[0].size);     //    
xhreq.setRequestHeader("uploadfile_name", encodeURI(fwFile.files[0].name)); //    
xhreq.send(fReader.result);

send()呼び出しを1回呼び出すとデータが送信されるため、ファイル名などのパラメータをコンテンツに追加するのは難しいので、ここでキーファイル名をheaderの中に置くxhreq.setRequestHeader("uploadfile_name", encodeURI(fwFile.files[0].name));//中国語対応.ヘッダの中のパラメータが中国語の場合、バックグラウンドで読み込まれると文字化けしてしまうので、encodeURI()を1回エンコードし、バックグラウンドで読み込んでからもう一度トランスコードする必要があります.

var xhreq=createHttpRequest();
xhreq.onreadystatechange=function(){
	if(xhreq.readyState==4){
		if(xhreq.status==200){
			uploadTip.innerText=xhreq.responseText;
			setTimeout(function(){
			hideUploadDialog()
			},2000);	//2    
		}else{
			uploadTip.innerText="       ";
		}	
	 }
}

リクエストがバックグラウンドに送信過程において、onreadystatechangeという変調関数によって現在の状態を知ることができ、readystatechangeが4に等しく、状態が200の場合、応答が準備完了し、応答の結果がxhreqであることを示す.responseText.
 
完全なdemoは次のとおりです.

function createHttpRequest()
 {
	 var xmlHttp=null;
     try{
 	    // Firefox, Opera 8.0+, Safari
 	    xmlHttp=new XMLHttpRequest();
 	 }catch (e){
 	    // Internet Explorer
 		try{
 	        xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
 	    }catch (e){
 		try{
 		    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
 	        }catch (e){
 	            alert("        AJAX！");
 	        }
 	    }
 	}
    return xmlHttp;
 }
 
 function uploadFileToServer(){
	var uploadFile = document.getElementById("upload_file_id");
	var uploadTip = document.getElementById("upload_tip_id");
	var uploadProgress = document.getElementById("upload_progress_id");
	
	if(uploadFile.value==""){
		 uploadTip.innerText="       ";
	}else if(uploadFile.files[0].size>1024 &&uploadFile.files[0].size<(40*1024*1024)){ 
		try{
			if(window.FileReader){
				var fReader = new FileReader();
				var xhreq=createHttpRequest();
				 xhreq.onreadystatechange=function(){
					 if(xhreq.readyState==4){
						if(xhreq.status==200){
							 uploadTip.innerText="      ";
							 setTimeout(function(){
								hideUploadDialog()
							},2000);	//2    
						}else{
							uploadTip.innerText="       ";
						}	
					 }
				 }
				fReader.onload=function(e){
					 xhreq.open("POST","/upload/file",true);
					 xhreq.setRequestHeader("Content-type", "application/octet-stream"); //   
					 xhreq.setRequestHeader("Content-length", fwFile.files[0].size);     //    
					 xhreq.setRequestHeader("uploadfile_name", encodeURI(fwFile.files[0].name)); //    
					 xhreq.send(fReader.result);
				}
				fReader.onprogress = function(e){
					 uploadProgress.value = e.loaded*100/e.total;
				}
				fReader.readAsArrayBuffer(uploadFile.files[0]);
				uploadProgress.style.visibility="visible";
				uploadProgress.value = 0;
			}else{
				uploadTip.innerText="          ";
			}			
		}catch(e){
			 uploadTip.innerText="      ";
		}
	}else{
		  uploadTip.innerText="       ";
	}
}
 function showUploadDialog(){
	var up_dialog=document.getElementById("upload_dialog");
  document.getElementById("upload_tip_id").innerText="         ";
  document.getElementById("upload_progress_id").style.visibility="hidden";
	up_dialog.style.visibility="visible";
	
 }
 function hideUploadDialog(){
	var up_dialog=document.getElementById("upload_dialog");
	document.getElementById("upload_progress_id").style.visibility="hidden";
	up_dialog.style.visibility="hidden";
 }


   

   	  

   	  

   	  

   	  

   	  

   	   しいファイルをアップロード
   
   
   
 
   	    

  	  	  

  	  	  	  

  	  	  	  	      ：