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. eclipse 安卓运行一直跳转到调试模式

    最直接的办法,换手机试试,如果在其他手机上能run,那就重启手机即可 感觉写这么一点点似乎不足以发表一篇博客,给个链接吧:http://www.itnose.net/detail/6103213.ht ...

  2. sim808模块收发送短信

    一,简介 SIM 808发送短信分text模式和PDU模式.text模式已ascii码发送短信,这种模式比较简单,发送命令AT+CMGF=1就可以发送短信,而PDU模式比较复杂,首先发送命令AT+CM ...

  3. BGP多线单IP技术实现形式以及其他双线对比

    自从电信与网通分离之后,北方网通与南方电信网络的互联瓶颈问题一直没有得到很好的解决,这个问题也严重困扰广大的ICP服务商.ICP也只能根据自己网站主流用户群是在南方还是在北方,服务重点是在南方还是北方 ...

  4. 批量修改安卓apk包名

    1.准备工作 1.1 反编译工具apktool下载 1.2 java, android SDK安装 1.2 python安装 2.反编译现有包 apktool.bat d test.apk 3. 直接 ...

  5. JPA 系列教程21-JPA2.0-@MapKeyColumn

    @MapKeyColumn 用@JoinColumn注解和@MapKeyColumn处理一对多关系 ddl语句 CREATE TABLE `t_employee` ( `id` bigint(20) ...

  6. adb shell dumpsys

    adb shell dumpsys activity activities -- class/packagename adb shell dumpsys batterystate --reset   ...

  7. github 上传文件

    1.删除项目 2.  包管理器初始化  npm  init name  必填项   后面可一直回车 最后选择yes 3.建立本地仓储 在git bash 中输入命令  git  init 4. 添加 ...

  8. 五、oracle基本建表语句

    --创建用户create user han identified by han default tablespaceusers Temporary TABLESPACE Temp;grant conn ...

  9. 在Pythonanywhere上部署Django

    1 在github上创建一个仓库blog 2 克隆到本地,添加Django项目,再推送到github 3 克隆到pythonanywhere,以后每次更新用git pull即可 4 在pythonan ...

  10. img的问题

    一个div的宽高比和 里面的img的宽高比是一样的 ,div  img { width:100%:height:100%;} img {border:0}   img{ 设置为border:none无 ...