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. 用python做中文自然语言预处理

    这篇博客根据中文自然语言预处理的步骤分成几个板块.以做LDA实验为例,在处理数据之前,会写一个类似于实验报告的东西,用来指导做实验,OK,举例: 一,实验数据预处理(python,结巴分词)1.对于爬 ...

  2. 【noi openjudge题解】最低通行费

    这道题完全没有必要去计算限制时间,把时间当做一个参数来做就行了.知道了这一点之后就可以直接使用DP求解了 #include <algorithm> #include <iostrea ...

  3. #js#简单的在线计算器

    啊因为懒得去找素材了,所以做了一个仿win10计算器的灰白色计算器. 参考:http://www.html5tricks.com/jquery-calculator.html HTML源码: < ...

  4. window下安装apache---使用wamp

    01 wamp-server-wamp5-2-5-multi-win.exe 02 wamp报错时,需要的补丁(vcredist_x64.exe) 无法启动此程序,因为计算机中丢失MSVCR110.d ...

  5. ios开发判断手机是否安装微信app

    1.代码如下 if ([WXApi isWXAppInstalled]) 2.如果以上代码无效,请在plist文件中添加如下内容

  6. 《HTML5与CSS3权威指南》读书笔记（上册）—HTML5篇

    豆瓣上的评分少且评价不太好,阅读当中发现几处刊物上的小问题,不过线下口碑貌似不错,基本上人手一本 上册五百多页,主讲H5,分为标签,本地存储,离线应用程序,新的API,获取地理位置信息标签包含表单,C ...

  7. centos 安装cacti监控

    CentOS 6下Cacti搭建文档 安装依赖关系 yum -y install mysql-devel httpd php php-pdo php-snmp php-mysql lm_sensors ...

  8. myeclipse连接数据库oracle

    package xsl; import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStat ...

  9. Linux GIT服务器配置

    Linux下安装git插件 1. 下载git网址:     https://github.com/git/git/releases 2. 放入usr/src/下 3. tar -zxvf git-** ...

  10. postgreSQL-如何查数据库表、字段以及字段类型、注释等信息？

    之前从网上也搜索了一些关于postgreSQL的系统表含义以及如何查表相关信息,但是都没有一个完整的内容,所以自己将找到的一些内容作了下整合,大家可以根据自己需要再对sql进行调整. --1.查询对象 ...