©2020-2024 ioDraw All rights reserved,
Privacy Policy
因为业务的需求，需要实现一个通过浏览器把本地文件上传到服务器的功能，因为之前没有做过，所以也是经过了一番探索才实现了这个功能，这里只介绍前端的实现，后台的接收、验证和保存就不介绍了。
这个流程如下：
1、读取本地文件
2、建立和服务器的连接（使用AJAX）
3、上传一些头信息和文件流
4、等待服务器响应后，显示结果
读取本地文件，在页面中点击 "浏览" 后，弹出文件选择对话框，使用 <input
type="file"/>标签即可，如果要过滤指定后缀的文件，添加accept属性，如只能选择rar文件
<input class="style_file_content" accept=".rar" type="file"
id="upload_file_id"/>
要通过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 后才会真正建立和服务器的连接，第一个参数是请求的方式，第二个参数是对应的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()调用一次之后，就会把数据发送出去，比较难在内容里面添加一些参数，比如文件名等信息，所以这里键文件名放在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。
完整的demo如下：
<!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>