Html5 upload img

2012年12月27日

20:36

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-">

<title>html 图片上传预览</title>

<script src="jquery/jquery-1.8.2.min.js" type="text/javascript"></script>

<script type="text/javascript">

$(function(){

$("input[type='file']").change(function(evt){

var files = evt.target.files;

for (var i =0 , f; f = files[i]; i++) {

if (!f.type.match('image.*')) {

continue;

}

var reader = new FileReader();

reader.onload = (function(theFile) {

return function(e) {

$("#list img").attr("src",e.target.result);  //预览图片的位置

};

})(f);

reader.readAsDataURL(f);

}

});

})

</script>

</head>

<body>

<form enctype="multipart/form-data" action="" method="post">

<input type="file" name="imageUpload" />

<div id="list"><img src=""></div>

</form>

</body>

</html>

html 图片上传预览的更多相关文章

  1. 兼容好的JS图片上传预览代码

    转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...

  2. Jquery图片上传预览效果

    uploadPreview.js jQuery.fn.extend({ uploadPreview: function (opts) { var _self = this, _this = $(thi ...

  3. [前端 4] 使用Js实现图片上传预览

    导读:今天做图片上传预览,刚开始的做法是,先将图片上传到Nginx,然后重新加载页面才能看到这个图片.在这个过程中,用户一直都看不到自己上传的文件是什么样子.Ps:我发现我真的有强迫症了,都告诉我说不 ...

  4. Javascript之图片上传预览

    使用Javascript之图片上传预览,我们无需上传到服务器中,兼容所有浏览器. 关键方法是使用微软库filter:progid:DXImageTransform.Microsoft.AlphaIma ...

  5. HTML5 图片上传预览

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...

  6. ASP.NET工作笔记之一：图片上传预览及无刷新上传

    转自:http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html 最近项目里面涉及到无刷新上传图片的功能,其实也就是上 ...

  7. php 图片上传预览(转)

    网上找的图片上传预览: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

  8. js实现图片上传预览及进度条

    原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器<input type= ...

  9. js前端实现多图图片上传预览

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

随机推荐

  1. IOS常遇问题个人收藏网址指南

    代码适配Masonry使用的详细介绍: http://blog.csdn.net/majiakun1/article/details/51160339 Masonry使用注意篇: http://www ...

  2. Oracle新建实例后，修改sys和system密码。

    sqlplus/nolog connect sys as sysdba alert user sys identified by pwd;

  3. Python中enumerate()的使用方法

    enumerate 函数用于遍历序列中的元素以及它们的下标: >>> for i,j in enumerate(('a','b','c')): print i,j 0 a1 b2 c ...

  4. Linux 网络性能tuning向导

    本文的目的不完全在于提供调优信息,而是在于告诉读者了解Linux kernel如何处理数据包,从而能够在 自己的实践中发挥Linux 内核协议栈最大的性能 The NIC ring buffer 接收 ...

  5. python生产者消费者模型

    业界用的比较广泛,多线程之间进行同步数据的方法,解决线程之间堵塞,互相不影响. server --> 生产者 client --> 消费者 在一个程序中实现又有生产者又有消费者 ,生产者不 ...

  6. ramfs/tmpfs: Linux RAM filesystems

    Previously in windows, I uses ramdisk, to accelerate chrome browsing. However, in linux, this is mad ...

  7. C# TextBox中的Validating与Validated事件[转]

    validating事件发生的时候,值还没有被真正存入,所以是空的,而validated事件发生的时候,值已经存入,所以能取出:一个相当于值的前因,一个相当于值的后果.也就是说,可以用validati ...

  8. iOS开发中怎么样使用激光推送

    1.注册激光推送的账号 ----> 创建应用 2.上传推送测试和发布的p12文件  注意密码的填写 3.下载sdk并拖进工程里 4.在build setting 搜索search   把路径改一 ...

  9. 一起看看2016中国第三届CSS开发者大会有哪些大咖演讲

    中国第三届CSS开发者大会于2016年12月17日在广州举办.由W3C.w3ctech.前端圈主办.本次大会我们将邀请行业内知名讲师,与大家共聚广州,畅聊CSS. 快捷报名通道:http://www. ...

  10. html5权威指南：嵌入另一张HTML文档、通过插件嵌入内容、嵌入数字表现形式

    嵌入另一张HTML文档.通过插件嵌入内容.嵌入数字表现形式:http://www.cnblogs.com/yc-755909659/p/5928125.html