html页面实现文件上传

全栈程序员-站长 • 2026年3月19日下午6:57 • 未分类 • 阅读 2

因为业务的需求，需要实现一个通过浏览器把本地文件上传到服务器的功能，因为之前没有做过，所以也是经过了一番探索才实现了这个功能，这里只介绍前端的实现，后台的接收、验证和保存就不介绍了。

这个流程如下：

1、读取本地文件

2、建立和服务器的连接（使用AJAX）

3、上传一些头信息和文件流

4、等待服务器响应后，显示结果

读取本地文件，在页面中点击 “浏览” 后，弹出文件选择对话框，使用标签即可，如果要过滤指定后缀的文件，添加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 后才会真正建立和服务器的连接，第一个参数是请求的方式，第二个参数是对应的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如下：