form表单文件上传以及预览

时间：2022-11-22 12:49:56

 需要用户上传头像，开始用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 是圆角化。


标签：

相关文章