form表单文件上传以及预览

需要用户上传头像，开始用kendo ui 的upload，但是样式不知如何修改，并且没有预览功能，于是上网搜资料。最终用的是form表单通过隐藏的iframe实现无刷新上传图片。<参考：http://www.cnblogs.com/devin87/p/web-uploader.html中的传统上传，里面也有HTML5 实现文件上传>，使用HTML5 实现图片预览<参考：http://itindex.net/detail/44612-%E4%B8%8A%E4%BC%A0-%E5%9B%BE%E7%89%87>

文件上传：

<span style="font-size:12px;"><div class="file-box">
	<!-- 通过将 form 的 target 指向 iframe 的 name 来实现无刷新上传 -->
	<form action="${saveUrl}" target="channel" method="POST" enctype="multipart/form-data">	        
	        <input type="file"  class="file"   name="fileField"  id="fileField" />						
		<input type="submit" class="btn" value="上传" />
			
	</form>
</div>
    <iframe src=""  name="channel" style="display:none" id="channel"></iframe></span>

HTML5中的文件上传还没有看%>_<%

图片预览：

<span style="font-size:12px;"><script type="text/javascript"> 
  $(function(){ 
      $("input[type='file']").change(function(evt){ 
    	
         var files = evt.target.files;   
         for (var i = 0, f; f = files[i]; i++) { 
           if (!f.type.match('image.*')) { 
             continue; 
           }  
           var reader = new FileReader();  
           reader.onload = (function(theFile) { 
             return function(e) {                                 
              $("#list img").attr("src",e.target.result);  //预览图片的位置                  
             }; 
           })(f); 
  
           reader.readAsDataURL(f); 
         } 
     }); 
 }) 

   </script> </span>

但是<input type="file"> 控件样式需要修改。 form表单文件上传以及预览

用一个text和一个button来显示这个file的样式。把之前的按钮透明度opacity设置为0，然后把它放在父标签内，比如外层用div 包裹，通过position:absolute 来覆盖

<span style="font-size:12px;"> <input type='text' name='textfield' id='textfield' class='txt' />  
 <input type='button' class='btn' value='浏览...' /></span>

修改过样式的可以预览的代码：

<span style="font-size:12px;"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.file-box{ position:relative;width:370px;}
.txt{ height:27px; border:1px solid #cdcdcd; width:158.1px;border-radius: 5px 5px 5px 5px;}
.btn{ background-color:#FFF; border:1px solid #CDCDCD;height:26px; width:60px;border-radius: 5px 5px 5px 5px;}
.file{ position:absolute; top:0; right:80px; height:26px; filter:alpha(opacity:0);opacity: 0;width:260px } 
</style>
</head>
<body>
<div class="file-box">
	<!-- 通过将 form 的 target 指向 iframe 的 name 来实现无刷新上传 -->
	<form action="${saveUrl}" target="channel" method="POST" enctype="multipart/form-data">	        
			<input type='text' name='textfield' id='textfield' class='txt' />  
            <input type='button' class='btn' value='浏览...' />
			<input type="file"  class="file"   name="fileField"  id="fileField"  onchange="document.getElementById('textfield').value=this.value" />						
			<input type="submit" class="btn" value="上传" />
			
	</form></div>
    <iframe src=""  name="channel" style="display:none" id="channel"></iframe>
  <script type="text/javascript"> 
  $(function(){ 
      $("input[type='file']").change(function(evt){ 
    	
         var files = evt.target.files;   
         for (var i = 0, f; f = files[i]; i++) { 
           if (!f.type.match('image.*')) { 
             continue; 
           }  
           var reader = new FileReader();  
           reader.onload = (function(theFile) { 
             return function(e) {                                 
              $("#list img").attr("src",e.target.result);  //预览图片的位置                  
             }; 
           })(f); 
  
           reader.readAsDataURL(f); 
         } 
     }); 
 }) 

   </script> 
</body>
</html></span>

其中border-radius 是圆角化。

秒客网

form表单文件上传以及预览

相关文章