首页 > Web开发 > 详细

html5上传图片

时间:2017-02-05 10:57:55      阅读:256      评论:0      收藏:0      [点我收藏+]
<!DOCTYPE HTML>
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-">
 <title>html 图片上传预览</title>
 <script src="jquery/jquery-1.8.2.min.js" type="text/javascript"></script>
 <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>
 </head>
 <body>
 <form enctype="multipart/form-data" action="" method="post">
   <input type="file" name="imageUpload" />
   <div id="list"><img src=""></div>
 </form>
</body>
</html>

 

html5上传图片

原文:http://www.cnblogs.com/thankyouGod/p/6366938.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!