html详情页 上传附件,html页面实现文件上传

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

这个流程如下：

1、读取本地文件

2、建立和服务器的连接(使用AJAX)

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

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

读取本地文件，在页面中点击 "浏览" 后，弹出文件选择对话框，使用 标签即可，如果要过滤指定后缀的文件，添加accept属性，如只能选择rar文件

要通过js将文件读取出来，需要用到 FileReader

var fReader = new FileReader();

fReader.οnlοad=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如下：

文件上传测试

文件路径：

请选择要上传的文件

取消

确定