上传图片 预览功能

标签： 上传 图片 功能 | 发表时间：2013-06-21 23:34 | 作者：
出处：http://www.iteye.com

使用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>

 





已有 0 人发表留言，猛击->> 这里<<-参与讨论


ITeye推荐



相关 [上传 图片 功能] 推荐：

Twitter支持上传图片功能

- linsen - 月光博客
　　Twitter在官方微博中称，已经全面推出新版Twitter页面，旧版Twitter页面下线，用户将无法再使用旧版页面. 新版中，用户可以使用图片上传功能，上传用户本地的图片到Twitter里. 　　用户可以在他们的个人状态更新框的最左侧找到一个相机图标，用户可以点击该图标进行图片上传. 用户可以从自己的桌面中上传不超过3MB的图片，然后相关图片信息将会嵌入到用户的Twitter状态中.

上传图片 预览功能

- - ITeye博客
使用HMTL5 FileReader 处理上传图片的预览，以下代码已经在IE7，8,9,firefox 21.0,chrome浏览器下测试通过. 如想了解更多HTML5. 请参看： http://hushc.sinaapp.com//post/27. 已有 0 人发表留言，猛击->> 这里<<-参与讨论.

html5 图片上传预览

- - 博客园_首页
  前段时间做html5项目的时候，做了一个图片上传功能，并且可以直接预览，单纯的js就可以实现，很方便的.   这样做比调用后台方便多了，但是只支持html5的，html5以前是不支持的. 未来html5是主流，所以这种方法非常方便的.   几段js代码就可以来实现，而且解析速度也很快. 这种方法值得推广，以后前端也不要为这个烦恼了，还要后台用程序加载出来，那样太浪费时间了.

上传图片之上传前预览图片

- - CSDN博客推荐文章
上传图片对图片进行一下预览，可以了解图片上传后大概会是什么样子，此功能用js实现，然后在fileupload控件的change事件中调用，这样当用fileupload选择完图片以后，图片就会自动显示出来了. fileupload控件及用来预览图片的image：. 功能很简单，代码也很易懂，相信不用我多废话大家也能看懂吧.

JAVA上传图片的缩放处理

- - CSDN博客推荐文章
  图片上传到服务器后，会根据情况将图片缩小成一个图标，我们可以利用java强大的图形处理功能，对上传的图片进行缩放处理. 　　下面的程序使用jdk1.4中最新的ImageIO对图片进行读写. 使用AffineTransform对图片进行缩放. 　　* @param fromdir 图片的原始目录.

移动端 H5 图片压缩上传

- - IT瘾-dev
大体的思路是，部分API的兼容性请参照 caniuse：. 利用 FileReader,读取 blob对象,或者是 file对象，将图片转化为 data uri的形式. 使用 canvas,在页面上新建一个画布,利用 canvas提供的API,将图片画入这个画布当中. 利用 canvas.toDataURL()，进行图片的压缩，得到图片的 data uri的值.

新浪微博支持上传多张图片，支持图片拼接

- Haisheng HU - 36氪
百闻不如一见，一张好看的图片对一篇文章、一条微博来说都可以增色不少. 新浪微博一直让我耿耿于怀的一个功能就只一次只能上传一张图片，而我更希望是几张图片拼在一起，更好地说明某个话题. 今天新浪微博推出了上传多张图片的功能，使用起来非常简单：. 输入文字，然后选择插入图片：. 选择版式布局，根据图片张数不同，新浪微博提供了十几种版式，选完之后，你还可以对照片进行缩放和旋转等操作：.

基于HTML5的可预览多图片Ajax上传

- Lynn - 张鑫旭-鑫空间-鑫生活
本文地址：http://www.zhangxinxu.com/wordpress/?p=1923. 在XHTML的时代，我们使用HTML file控件上传图片一次只能上传一张. 要一次上传多图，做法是借助于flash. 可惜，使用复杂的点，比如flash文件需与页面同父文件夹，JavaScript文件大小也很可观.

html5拖拽图片批量ajax无刷新进度上传

- - Web前端 - ITeye博客
之前有篇文章说到HTML5的拖拽（. 这里说的拖拽图片只是弱化了拖的概念，而强化了拽的操作. 从浏览器外部拖动一个文件到浏览器中来，如：. 拖动文件到浏览器之后，就会打开浏览器支持的文件，如常用的txt、图片等，如下：. 操作如上常用文件，一般都有默认行为来处理这样的事件. 这里说的拖拽上传也是一个道理，就是要做的是从浏览器外部拖动文件到浏览器中来，并且在当前页面上传该文件.

Gmail 新功能：图片可直接拖拽入邮件正文

- adrift - GSeeker
官方 Blog 消息， Gmail 邮箱实现图片拖放 (drag-and-drop) 附加功能，使用者从电脑硬盘里拖拽出图片后，可直接拉入浏览器，然后图片便会自动插入到邮件正文中. 目前，只要用户使用的是 Google Chrome 浏览器就可以直接使用该新功能. Google 表示，很快用户就可以在其他浏览器中使用该功能.