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. crontab 添加sh文件定时

    (1)编写sh文件,比如/orcl/test/export.sh 编写crond文件 chmod 755 /orcl/test/*      //复制所有权限 [root@postest test]# ...

  2. [Q]AdobePDF虚拟打印机自动保存PDF

    使用打图精灵打印时,选择“Adobe PDF”虚拟打印机打印(注意不选择“打印到文件”),每张图纸都会弹出一个保存对话框,如何避免? 从 操作系统->控制面板->硬件和声音->设备和 ...

  3. sql第二天

    --基本格式 select * from tblclass --对于列进行限制 --格式一:取指定列 select cid,cname from TblClass select cname from ...

  4. jquery中get传输方法实现读取xml文件

    xml文件: <?xml version="1.0" encoding="gb2312"?> <china> <province ...

  5. 输入身份证号码自动读取生日与性别（delphi）

    一.格式介绍: [15位号码格式] 1.第l一6位数为行政区划代码; 2.第7-12位数为出生日期代码; 3.第13---15位数为分配顺序代码; (1).行政区划代码,是指公民第一次申领居民身份证时 ...

  6. [译][待续]Chap1.Using neural nets to recognize handwritten digits

    Chapter1 使用神经网络辨识手写数字 人类的视觉系统是自然界的一大奇迹.试看如下的手写数列: 绝大多数人都能毫不费劲地认出这些数字是504192,而这会让人产生识别数字非常简单的错觉.人类大脑的 ...

  7. 找出Java数组中不同的值

    public void deltp(PrintWriter out) { try{ PageData pd = new PageData(); pd = this.getPageData(); Str ...

  8. 简单封装常用js方法

    1.uploadfiy插件封装 /* 参数:uploadID:上传控件ID url:请求后台url路径   callback:回调函数 */ uploadfiy({ uploadID: $('#btn ...

  9. 常用到的简单命令 Sublime Git NPM WindowsCMD MacTerminal(Unix命令)

    sublime 选择标签及其内容 ctrl+shift+a连续按两次 Git 撤销 add 重置暂存区的指定文件,与上一次commit保持一致,但工作区不变 git reset [file] 撤销 c ...

  10. HDU - 3068 最长回文（manacher）

    HDU - 3068 最长回文 Time Limit: 2000MS   Memory Limit: 32768KB   64bit IO Format: %I64d & %I64u Subm ...