上传图片 预览功能

标签: 上传 图片 功能 | 发表时间: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 表示,很快用户就可以在其他浏览器中使用该功能.