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. sql注入示例

    实验指导说明 实验环境 • 实验环境 o 操作机:Windows XP o 目标机:Windows 2003 o 目标网址:www.test.ichunqiu • 实验工具: Tools Path S ...

  2. Apache 2.4.16、PHP5.6.11安装教程

    以前我写过Apache2.4和php5.5的安装教程,但是后来我自己跟着自己写的东西做时发现有很多问题,这里把这些问题重新修正,再写一个教程,供大家参考. 注意:WinXP系统请选择旧版本Apache ...

  3. [Q]如何将图纸打印为黑白的及设置打印样式

    若只是想打印黑白图形,则在“打印样式列表”选择“monchrome.ctb”打印样式即可. 设置其它打印样式:在CAD批量打图精灵主界面下点设置打印样式图标,如下图: 在打开的资源管理器中选择您想要更 ...

  4. informix 存储过程结构

    1.简介         存储过程(Stored Procedure)是一组为了完成特定功能的SQL语句集,经编译后存储在数据库中.用户通过指定存储过程的名字并给出参数(如果该存储过程带有参数)来执行 ...

  5. linux 调整文件系统大小 LVM

    fuser -m /home umount /home lvreduce -L 150G /dev/mapper/centos-home lvextend -L +300G /dev/mapper/c ...

  6. jquery点击选中，再次点击取消选中

    if(!$(this).hasClass("current")){ $(this).addClass("current"); }else{ $(this).re ...

  7. 浅谈Objective-C对象初始化的三类程序猿

    序 早上看了位仁兄写了<Swift:让人眼前一亮的初始化方式>的文章.什么?!初始化?Objective-C!好吧,吓哔哔~~~ 一.普通程序猿 普通程序员使用最常见路人姿势等场.普普通通 ...

  8. 成为java高手的八大条件

    1.扎实的基础  数据结构.离散数学.编译原理,这些是所有计算机科学的基础,如果不掌握它们,很难写出高水平的程序.程序人人都会写,但当你发现写到一定程度很难再提高 的时候,就应该想想是不是要回过头来学 ...

  9. 【定位：PDF文件定位关键字所在坐标和页码】

    iText简介: iText是著名的开放源码的站点sourceforge一个项目,是用于生成PDF文档的一个java类库.通过iText不仅可以生成PDF或rtf的文档,而且可以将XML.Html文件 ...

  10. placeholder的美化

    之前在介绍HTML5的placeholder属性时,曾实现了一些页面例子让大家参考,但这些例子里的背景文字都是灰色的,样式很单一,其实它们可以做的更好看.CSS3里提供了专门的规则属性来美化用plac ...