html页面实现文件上传

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

这个流程如下：

1、读取本地文件

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

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

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

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

<input class="style_file_content" accept=".rar" type="file" />

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

var fReader = new FileReader();
=function(e){
   //读取完成
   ();
}
([0]);

读取文件完成后，会回调onload 函数，文件内容保存在，所以在onload 里面把数据发生到服务器即可

和服务器建立连接，js代码如下

function createHttpRequest()
 {
	 var xmlHttp=null;
     try{
 	    // Firefox, Opera 8.0+, Safari
 	    xmlHttp=new XMLHttpRequest();
 	 }catch (e){
 	    // Internet Explorer
 		try{
 	        xmlHttp=new ActiveXObject("");
 	    }catch (e){
 		try{
 		    xmlHttp=new ActiveXObject("");
 	        }catch (e){
 	            alert("您的浏览器不支持AJAX！");
 	        }
 	    }
 	}
    return xmlHttp;
 }

调用open 后才会真正建立和服务器的连接，第一个参数是请求的方式，第二个参数是对应的URL

("POST","/upload/file",true);
("Content-type", "application/octet-stream"); //流类型
("Content-length", [0].size);     //文件大小
("uploadfile_name", encodeURI([0].name)); //兼容中文
();

因为调用send()调用一次之后，就会把数据发送出去，比较难在内容里面添加一些参数，比如文件名等信息，所以这里键文件名放在header里面，如 ("uploadfile_name", encodeURI([0].name)); //兼容中文。因为如果header里面的参数是中文的时候，后台读出来时会出现乱码，所以需要encodeURI() 做一次编码，后台读取后再做一次转码。

var xhreq=createHttpRequest();
=function(){
	if(==4){
		if(==200){
			=;
			setTimeout(function(){
			hideUploadDialog()
			},2000);	//2秒后隐藏
		}else{
			="文件上传失败了";
		}	
	 }
}

在请求发送给后台的过程中，可以通过 onreadystatechange 这个会调函数知道当前的状态，当 readyState 等于 4 且状态为 200 时，表示响应已就绪，响应的结果在。

完整的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("");
 	    }catch (e){
 		try{
 		    xmlHttp=new ActiveXObject("");
 	        }catch (e){
 	            alert("您的浏览器不支持AJAX！");
 	        }
 	    }
 	}
    return xmlHttp;
 }
 
 function uploadFileToServer(){
	var uploadFile = ("upload_file_id");
	var uploadTip = ("upload_tip_id");
	var uploadProgress = ("upload_progress_id");
	
	if(==""){
		 ="请选择一个文件";
	}else if([0].size>1024 &&[0].size<(40*1024*1024)){ 
		try{
			if(){
				var fReader = new FileReader();
				var xhreq=createHttpRequest();
				 =function(){
					 if(==4){
						if(==200){
							 ="文件上传成功";
							 setTimeout(function(){
								hideUploadDialog()
							},2000);	//2秒后隐藏
						}else{
							="文件上传失败了";
						}	
					 }
				 }
				=function(e){
					 ("POST","/upload/file",true);
					 ("Content-type", "application/octet-stream"); //流类型
					 ("Content-length", [0].size);     //文件大小
					 ("uploadfile_name", encodeURI([0].name)); //兼容中文
					 ();
				}
				 = function(e){
					  = *100/;
				}
				([0]);
				="visible";
				 = 0;
			}else{
				="浏览器不支持上传文件";
			}			
		}catch(e){
			 ="文件上传失败";
		}
	}else{
		  ="文件不符合要求";
	}
}
 function showUploadDialog(){
	var up_dialog=("upload_dialog");
  ("upload_tip_id").innerText="请选择要上传的文件";
  ("upload_progress_id").="hidden";
	up_dialog.="visible";
	
 }
 function hideUploadDialog(){
	var up_dialog=("upload_dialog");
	("upload_progress_id").="hidden";
	up_dialog.="hidden";
 }
</script>
<body>
   <div >
   	  <br>
   	  <br>
   	  <br>
   	  <br>
   	  <br>
   	  <a class="style_copyright_a" href="javascript:void(0);" onclick="showUploadDialog()">上传新文件</a>
   </div>
   
   <div  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" />
  	  	  	  </div>
  	  	  	  <div class="style_content_prog_div">
  	  	  	  	 <span class="style_prog_span_hit" > 请选择要上传的文件 </span>
  	  	  	     <progress class="style_prog_content"  value="0" max="100"></progress> 
  	  	  	  </div>
  	  	  </div>
  	  	  <div class="style_content_lower_div">
  	  	  	   <span class="style_content_span" onmouseover="='#cccccc'" onmouseout="=''" onclick="hideUploadDialog()">取消</span>
  	  	  	   <span class="style_content_span" onmouseover="='#F5CCDC'" onmouseout="=''" onclick="uploadFileToServer()">确定</span>
  	  	  </div>
  	  </div>
   </div>
</body>
</html>

秒客网

html页面实现文件上传

相关文章