上传图片预览功能

最新推荐文章于 2025-12-18 10:02:55 发布

最新推荐文章于 2025-12-18 10:02:55 发布 · 137 阅读

文章标签：

#javascript #ViewUI

WEB前端同时被 2 个专栏收录

64 篇文章

订阅专栏

jsp相关

13 篇文章

订阅专栏

使用HMTL5 FileReader 处理上传图片的预览，以下代码已经在IE7，8,9,firefox 21.0,chrome浏览器下测试通过

如想了解更多HTML5

请参看：http://hushc.sinaapp.com//post/27

http://www.w3.org/TR/FileAPI/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script type="text/javascript" src='jquery.js'>

  </script>
  <script type="text/javascript">
  
$(function() {
    var path,
        clip = $("#img"),
        FileReader = window.FileReader;
    $("#fileP").change(function() {
        if (FileReader) {
            var reader = new FileReader(),
                file = this.files[0];
            reader.onload = function(e) {
                clip.attr("src", e.target.result);
            };
            reader.readAsDataURL(file);
        }
        else {
            path = $(this).val();
            if (/"\w\W"/.test(path)) {
                path = path.slice(1,-1);
            }
            clip.attr("src",path);
        }
    });
});
  </script>
 </head>

 <body>
  <input type="file" id="fileP">
  <img id="img" src="">
 </body>
</html>