html5 图片上传预览
- - 博客园_首页 前段时间做html5项目的时候，做了一个图片上传功能，并且可以直接预览，单纯的js就可以实现，很方便的. 这样做比调用后台方便多了，但是只支持html5的，html5以前是不支持的. 未来html5是主流，所以这种方法非常方便的. 几段js代码就可以来实现，而且解析速度也很快. 这种方法值得推广，以后前端也不要为这个烦恼了，还要后台用程序加载出来，那样太浪费时间了.
html5 图片上传预览
标签：
html5
图片
上传
| 发表时间：2012-06-19 16: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>
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的可预览多图片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代码：. 以上的三个
CSS 与 HTML5 响应式图片
- - TaoBaoUED 随着 Retina 屏幕的逐渐普及，网页中对图片的适配要求也越来越高. 如何让图片在放大了两倍的 Retina 屏幕显示依然清晰，曾经一度困扰着网页开发者，好在 CSS3 与 HTML5 已经着力在改变这种现状. 响应式图片是指： 用户代理根据输出设备的分辨率不同加载不同类型的图片，不会造成带宽的浪费.
HTML5之拖拽上传文件及chrome下文件夹上传
- - ITeye博客最近被安排做一个拖拽上传和文件夹上传的功能，不考虑兼容性，哈哈这个可以用HTML5实现. 这里就不仔细学习HTML5，我只是想找例子，然后偷过来用，至于原理边用边学. 首先这里有一个很好的实例实现拖拽上传： http://blogs.sitepointstatic.com/examples/tech/filedrag/1/index.html.
上传图片之上传前预览图片
- - CSDN博客推荐文章上传图片对图片进行一下预览，可以了解图片上传后大概会是什么样子，此功能用js实现，然后在fileupload控件的change事件中调用，这样当用fileupload选择完图片以后，图片就会自动显示出来了. fileupload控件及用来预览图片的image：. 功能很简单，代码也很易懂，相信不用我多废话大家也能看懂吧.
Wadda：基于 HTML5 Canvas 的图片放大镜
- - 博客园_首页Wadda 是下一代图片放大技术，使用HTML5 Canvas实现图片放大镜功能. 借助 HTML5 Canvas 标签，能够自定义放大级别而不需要为每个级别定义图片，还能够设置羽化（Fading）效果. 使用非常简单，只需在img标签的title属性中设置放大图片的路径，例如：. 引入Wadda.js文件，并添加如下代码：.
将HTML5 Canvas的内容保存为图片
- - CSDN博客Web前端推荐文章主要思想是借助Canvas自己的API - toDataURL()来实现，整个实现. HTML + JavaScript的代码很简单. 作者：jia20003 发表于2013-5-19 21:44:01 原文链接. 阅读：166 评论：0 查看评论.
html5拖拽和缩小图片的解决方案
- - Marshal's Blog要拖拽文件到绿色区域中，然后产生这样的效果：. 这里，绿色框是图片尺寸的一半，即：绿色框长宽为512×384，图片大小为1024×768. html5对文件读取的支持. 读取到的图片是对二进制数据的base64编码，可在img标签中直接显示. 使用canvas，在其中显示img. canvas的内容通过html5支持的函数导出为base64编码的图片信息.