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. linux配置更改yum源

    1,进入yum源配置目录 cd /etc/yum.repos.d 2,备份系统自带的yum源mv CentOS-Base.repo CentOS-Base.repo.bk下载163网易的yum源:wg ...

  2. ubuntu 14.04—解决软件中心进度条卡死的问题

    软件中心下载安装软件进度条卡住了,这时候解决方法为: 先解锁: sudo rm -rf /var/lib/dpkg/lock 如果此时开启软件中心,发现进度还在, 那么我们需要找到相关的进程关闭他,使 ...

  3. yahoo给出的关于网站优化的建议

    1.使用CDN 内容分发服务器会根据用户的位置选择最近的服务器响应用户的请求,静态资源放在CDN的性能将提升20%左右. 2.设置Expires和Cache-Contral头 将静态资源的过期时间设置 ...

  4. .net后台代码临时表创建

    写法一: var dt = new DataTable(); dt.Columns.Add(new DataColumn("Id", System.Type.GetType(&qu ...

  5. centos 设置删除提示

    centos 设置删除.覆盖提示 相信好多用linux的同学都用过cp这个命令来覆盖文件,但是新建的普通用户不会有任何提示,这时候心里就咯噔一下,赶紧看看新文件的是不是传上去了.如果加上提示,是不是就 ...

  6. 动态Order by

    ),) set @order='' ' select * from T_Table order by then ID end desc, then CreateTime end desc

  7. JAVA17.1.12流程学习，潜心学习，少说多做，脚踏实地，一心一意。

  8. Linux常用命令汇总及使用方法（二）之文本编辑器VI

    VI可能是在Linux中使用比较频繁的文本编辑器,如果不能熟练使用VI,在一定程度上会影响工作效率,所以在这里记录一下VI的常用命令及操作方式 在[root@test ~]# vi carrie.tx ...

  9. js字符串函数 [http://www.cnblogs.com/qfb620/archive/2011/07/28/2119799.html]

    JS自带函数concat将两个或多个字符的文本组合起来,返回一个新的字符串.var a = "hello";var b = ",world";var c = a ...

  10. eclipse设置JSP的默认编码

    有时候我们新建一个JSP页面,但是编码却不是我们想要的,我们可在eclipse里面进行如下设置: 点击eclipse上面的window-->preferences 输入查找jsp-->点击 ...