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. myeclipse里如何添加mysql数据库

    首先声明,这只是我本人的一些经验,不代表任何集体和个人的利益,请勿没事就当喷子来喷我.我希望对一些对这方面学习的朋友有帮助,当然,我自己也是菜鸟级别啦!!!!!!!!!!!! 首先是电脑必要安装了my ...

  2. Python初识与简介【开篇】

    目录 1.扯淡 2.Python历史 3.Python简介 4.Python应用 5.为什么是python而不是其他语言? 6.Python的种类 7.Python的特点 8.Python设计哲学 9 ...

  3. 浙大 pat 1038 题解

    1038. Recover the Smallest Number (30) 时间限制 400 ms 内存限制 32000 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHE ...

  4. delphi const

    参考:http://www.cnblogs.com/tibetwolf/articles/1785744.html 1.const修饰可能会优化编译代码.关于这一点与编译器密切相关,由于变量被cons ...

  5. C# 语言规范_版本5.0 (第18章 不安全代码)

    1. 不安全代码 **(注:此章对于跨多语言编程开发非常重要,如遇异常无法完成跨语言,建议使用此种方式.) 如前面几章所定义,核心 C# 语言没有将指针列入它所支持的数据类型,从而与 C 和 C++ ...

  6. django模板 实现奇偶分行

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. matlab里textread出现错误“Trouble reading floating point number from file (row 1, field 1)”

    matlab里textread出现错误“Trouble reading floating point number from file (row 1, field 1)” 解决办法:traindata ...

  8. 一个view相对于屏幕或者另外一个view 的坐标

    如果想知道一个view相对于屏幕或者另外一个view 的坐标,那么可以通过如下的方法得到: UIWindow * window=[[[UIApplication sharedApplication] ...

  9. 4、Xcode8中的钥匙串保存数据取出时候为空的问题

    Xcode7以及之前的版本直接使用Keychain存储数据即可,但是从Xcode8开始,再用之前的方法会发现,读取不到存进去的数据了,或者说,存储不进去了,原因是苹果加强了隐私保护,这个东西需要打开开 ...

  10. 批处理改hosts

    @echo off color 0F @attrib -r "%windir%\system32\drivers\etc\hosts" @echo ######测试配置 beg & ...