html5 图片上传预览

标签: html5 图片 上传 | 发表时间:2012-06-19 08:48 | 作者:高玉宝
分享到:
出处:http://www.cnblogs.com/

  

  前段时间做html5项目的时候,做了一个图片上传功能,并且可以直接预览,单纯的js就可以实现,很方便的。今天拿出来分享一下。

  这样做比调用后台方便多了,但是只支持html5的,html5以前是不支持的。未来html5是主流,所以这种方法非常方便的。

  几段js代码就可以来实现,而且解析速度也很快。这种方法值得推广,以后前端也不要为这个烦恼了,还要后台用程序加载出来,那样太浪费时间了。

  代码如下:

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>html5 图片上传预览</title>
 6 <script src="jquery-1.7.min.js" type="text/javascript"></script>
 7 <script type="text/javascript">
 8 $(function(){
 9     $("input[type='file']").change(function(evt){
10         var files = evt.target.files; 
11 
12         for (var i = 0, f; f = files[i]; i++) {
13 
14           if (!f.type.match('image.*')) {
15             continue;
16           }
17 
18           var reader = new FileReader();
19 
20           reader.onload = (function(theFile) {
21             return function(e) {                                
22              $("#list img").attr("src",e.target.result);  //预览图片的位置                 
23             };
24           })(f);
25 
26           reader.readAsDataURL(f);
27         }
28     });
29 })
30 
31 </script>
32 </head>
33 <body>
34 <form enctype="multipart/form-data" action="" method="post">
35   <input type="file" name="imageUpload" />
36   <div id="list"><img src=""></div>
37 </form>
38 </body>
39 </html>

 

本文链接

相关 [html5 图片 上传] 推荐:

html5 图片上传预览

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

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

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

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

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

HTML5本地裁剪图片

- - SegmentFault 最新的文章
我们首先需要创建一个 index.html文件,里面写上一些简单的 html和 css代码:. 以上的三个 <canvas>标签都是用来处理跟图片相关的内容的,详细的处理会在后续的js代码中给出. 而 id为 show_edit 和 id为 show_pic这两个是为了图片的预览和查看最后的图片生成结果.

CSS 与 HTML5 响应式图片

- - TaoBaoUED
 随着  Retina 屏幕的逐渐普及,网页中对图片的适配要求也越来越高. 如何让图片在放大了两倍的 Retina 屏幕显示依然清晰,曾经一度困扰着网页开发者,好在 CSS3 与 HTML5 已经着力在改变这种现状. 响应式图片是指: 用户代理根据输出设备的分辨率不同加载不同类型的图片,不会造成带宽的浪费.

HTML5之拖拽上传文件及chrome下文件夹上传

- - ITeye博客
最近被安排做一个拖拽上传和文件夹上传的功能,不考虑兼容性,哈哈这个可以用HTML5实现. 这里就不仔细学习HTML5,我只是想找例子,然后偷过来用,至于原理边用边学. 首先这里有一个很好的实例实现拖拽上传: http://blogs.sitepointstatic.com/examples/tech/filedrag/1/index.html.

人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata)

- - 彬Go
  早在公元2011年6月3日傍晚,人人网推出了一个很装B且完全无视IE浏览器的功能——拖拽上床. 哦,Sorry, 是 拖拽上传. 到现在,这个功能已经上线了整整半年,这篇文章也足足拖延了半年才分享给大家,实在是对不住了,呵呵,今后彬Go一定要勤奋发Blog. 您还可以参考以下HTML5相关文章:.

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

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

html5拖拽和缩小图片的解决方案

- - Marshal's Blog
要拖拽文件到绿色区域中,然后产生这样的效果:. 这里,绿色框是图片尺寸的一半,即:绿色框长宽为512×384,图片大小为1024×768. html5对文件读取的支持. 读取到的图片是对二进制数据的base64编码,可在img标签中直接显示. 使用canvas,在其中显示img. canvas的内容通过html5支持的函数导出为base64编码的图片信息.

Wadda:基于 HTML5 Canvas 的图片放大镜

- - 博客园_首页
Wadda 是下一代图片放大技术,使用HTML5 Canvas实现图片放大镜功能. 借助 HTML5 Canvas 标签,能够自定义放大级别而不需要为每个级别定义图片,还能够设置羽化(Fading)效果. 使用非常简单,只需在img标签的title属性中设置放大图片的路径,例如:. 引入Wadda.js文件,并添加如下代码:.