因为业务的需求，需要实现一个通过浏览器把本地文件上传到服务器的功能，因为之前没有做过，所以也是经过了一番探索才实现了这个功能，这里只介绍前端的实现，后台的接收、验证和保存就不介绍了。
这个流程如下：
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+, SafarixmlHttp=new XMLHttpRequest();}catch (e){// Internet Explorertry{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+, SafarixmlHttp=new XMLHttpRequest();}catch (e){// Internet Explorertry{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>
