時(shí)間：2023-07-05 21:24:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-07-05 21:24:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)
html頁(yè)面實(shí)現(xiàn)文件上傳：因?yàn)闃I(yè)務(wù)的需求，需要實(shí)現(xiàn)一個(gè)通過(guò)瀏覽器把本地文件上傳到服務(wù)器的功能，因?yàn)橹皼](méi)有做過(guò)，所以也是經(jīng)過(guò)了一番探索才實(shí)現(xiàn)了這個(gè)功能，這里只介紹前端的實(shí)現(xiàn)，后臺(tái)的接收、驗(yàn)證和保存就不介紹了。
在線咨詢
<input class="style_file_content" accept=".rar" type="file" id="upload_file_id"/>要通過(guò)js將文件讀取出來(lái)，需要用到 FileReadervar fReader = new FileReader();fReader.onload=function(e){ //讀取完成 xhreq.send(fReader.result);}fReader.readAsArrayBuffer(uploadFile.files[0]);讀取文件完成后，會(huì)回調(diào)onload 函數(shù)，文件內(nèi)容保存在fReader.result，所以在onload 里面把數(shù)據(jù)發(fā)生到服務(wù)器即可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; }調(diào)用open 后才會(huì)真正建立和服務(wù)器的連接，第一個(gè)參數(shù)是請(qǐng)求的方式，第二個(gè)參數(shù)是對(duì)應(yīng)的URLxhreq.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);因?yàn)檎{(diào)用send()調(diào)用一次之后，就會(huì)把數(shù)據(jù)發(fā)送出去，比較難在內(nèi)容里面添加一些參數(shù)，比如文件名等信息，所以這里鍵文件名放在header里面，如 xhreq.setRequestHeader("uploadfile_name", encodeURI(fwFile.files[0].name)); //兼容中文。因?yàn)槿绻鹔eader里面的參數(shù)是中文的時(shí)候，后臺(tái)讀出來(lái)時(shí)會(huì)出現(xiàn)亂碼，所以需要encodeURI() 做一次編碼，后臺(tái)讀取后再做一次轉(zhuǎn)碼。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="文件上傳失敗了"; } }}在 請(qǐng)求發(fā)送給后臺(tái)的過(guò)程中，可以通過(guò) onreadystatechange 這個(gè)會(huì)調(diào)函數(shù)知道當(dāng)前的狀態(tài)，當(dāng) readyState 等于 4 且狀態(tài)為 200 時(shí)，表示響應(yīng)已就緒，響應(yīng)的結(jié)果在xhreq.responseText。<!DOCTYPE html><html><head><meta charset="UTF-8"><title>文件上傳測(cè)試</title></head> <style type="text/css"> #content_div{ position:absolute; left:0px; top:0px; right:0px; bottom:0px; text-align:center } .upload_dialog_div{ position:fixed; left:0px; right:0px; top:0px; bottom:0px; overflow:auto; visibility:hidden; background-color: rgba(60,60,60,0.5); z-index:99; } .style_content_div{ position:relative; margin:auto; margin-top:160px; width:400px; height:160px; background:#F5F5DC; } .style_content_upper_div{ position:absolute; left:0px; top:0px; width:400px; height:100px; background:#F5F5DC; } .style_content_lower_div{ position:absolute; left:0px; top:100px; width:400px; height:60px; background:#F5FFDC; } .style_content_file_div{ position:absolute; left:15px; top:20px; width:380px; height:60px; } .style_file_span{ float:left; width:120px; height:36px; font-size:24px; text-align:right; } .style_file_content{ margin-top:5px; } .style_content_prog_div{ position:absolute; left:18px; top:57px; width:360px; height:40px; } .style_prog_span_hit{ color:#ff0000; } .style_prog_content{ width:360px; visibility:hidden; } .style_content_span{ width:200px; height:60px; line-height:60px; display:inline-block; float:left; font-size:32px; text-align:center; cursor: pointer; } .style_copyright_a{ text-decoration:none; color:#cc00cc; }</style><script>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="請(qǐng)選擇一個(gè)文件"; }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="請(qǐng)選擇要上傳的文件"; 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"; }</script><body> <div id="content_div"> <br> <br> <br> <br> <br> <a class="style_copyright_a" href="javascript:void(0);" onclick="showUploadDialog()">上傳新文件</a> </div> <div id="upload_dialog" class="upload_dialog_div"> <div class="style_content_div"> <div class="style_content_upper_div"> <div class="style_content_file_div"> <span class="style_file_span"> 文件路徑：</span> <input class="style_file_content" type="file" id="upload_file_id"/> </div> <div class="style_content_prog_div"> <span class="style_prog_span_hit" id="upload_tip_id"> 請(qǐng)選擇要上傳的文件 </span> <progress class="style_prog_content" id="upload_progress_id" value="0" max="100"></progress> </div> </div> <div class="style_content_lower_div"> <span class="style_content_span" onmouseover="this.style.background='#cccccc'" onmouseout="this.style.background=''" onclick="hideUploadDialog()">取消</span> <span class="style_content_span" onmouseover="this.style.background='#F5CCDC'" onmouseout="this.style.background=''" onclick="uploadFileToServer()">確定</span> </div> </div> </div></body></html>如果大家覺(jué)得不錯(cuò)的話，歡迎點(diǎn)贊、收藏、轉(zhuǎn)發(fā)???~關(guān)鍵詞：文件,實(shí)現(xiàn)
客戶&案例
營(yíng)銷資訊
關(guān)于我們
客戶&案例
營(yíng)銷資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
