时间：2023-07-05 21:24:01 | 来源：网站运营
时间：2023-07-05 21:24:01 来源：网站运营
html页面实现文件上传：因为业务的需求，需要实现一个通过浏览器把本地文件上传到服务器的功能，因为之前没有做过，所以也是经过了一番探索才实现了这个功能，这里只介绍前端的实现，后台的接收、验证和保存就不介绍了。
在线咨询
<input class="style_file_content" accept=".rar" type="file" id="upload_file_id"/>要通过js将文件读取出来，需要用到 FileReadervar fReader = new FileReader();fReader.onload=function(e){ //读取完成 xhreq.send(fReader.result);}fReader.readAsArrayBuffer(uploadFile.files[0]);读取文件完成后，会回调onload 函数，文件内容保存在fReader.result，所以在onload 里面把数据发生到服务器即可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 后才会真正建立和服务器的连接，第一个参数是请求的方式，第二个参数是对应的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);因为调用send()调用一次之后，就会把数据发送出去，比较难在内容里面添加一些参数，比如文件名等信息，所以这里键文件名放在header里面，如 xhreq.setRequestHeader("uploadfile_name", encodeURI(fwFile.files[0].name)); //兼容中文。因为如果header里面的参数是中文的时候，后台读出来时会出现乱码，所以需要encodeURI() 做一次编码，后台读取后再做一次转码。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 这个会调函数知道当前的状态，当 readyState 等于 4 且状态为 200 时，表示响应已就绪，响应的结果在xhreq.responseText。<!DOCTYPE html><html><head><meta charset="UTF-8"><title>文件上传测试</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="请选择一个文件"; }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"; }</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"> 请选择要上传的文件 </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>如果大家觉得不错的话，欢迎点赞、收藏、转发❤❤❤~关键词：文件,实现
