jQuery：[1]实现图片上传并预览
jQuery:[1]实现图片上传并预览
原理
预览思路
1.当上传对象的input被触发并选择本地图片之后获取要上传的图片对象的URL；
2.把对象URL赋值给实现写好的img标签的src属性
File对象
File对象可以用来获取文件的信息，还可以用来读取这个文件的内容，通常情况下，File对象是来自用户在一个input元素上选择文件后返回的FileList对象，也可以是来自由拖放操作生成的DataTransfer对象。
Blob对象
Blob对象是一个包含由只读原始数据的类文件对象，Blob对象中的数据并不一定得是JavaScript中的原生形式。File接口基本Blob，继承了Blob的功能，并且扩展了支持用户计算机上的本地文件，我们想要得到的对象URL实际上就是从Blob这个对象获取的。
实例
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="jquery-2.1.4.js"></script>
<title>Document</title>
</head>
<body>
<input id="upload" type="file">
<img id="preview" src="">
<script>
$('#upload').change(function(){
var obj = document.getElementById('upload').files[0];
var asrc = window.URL.createObjectURL(obj);
document.getElementById("preview").src = asrc;
})
</script>
</body>
</html>
效果
jQuery：[1]实现图片上传并预览的更多相关文章
- JQuery插件：图片上传本地预览插件，改进案例一则。
/* *名称:图片上传本地预览插件 v1.1 *作者:周祥 *时间:2013年11月26日 *介绍:基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari *插 ...
- ASP.NET MVC图片上传前预览
回老家过春节,大半个月,在家的日子里,吃好睡好,人也长了3.5Kg.没有电脑,没有网络,无需写代码,工作上相关的完全放下......开心与父母妻儿过个年,那样的生活令Insus.NET现在还在留恋.. ...
- 图片上传本地预览。兼容IE7+
基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari 预览地址:http://www.jinbanmen.com/test/1.html js代码:/**名称 ...
- input file实现多选，限制文件上传类型，图片上传前预览功能
限制上传类型 & 多选:① accept 属性只能与 <input type="file" /> 配合使用.它规定能够通过文件上传进行提交的文件类型. ② mu ...
- 一、简单的图片上传并预览功能input[file]
一.简单的图片上传并预览功能input[file] <!DOCTYPE html> <html lang="en"> <head> <me ...
- html之file标签 --- 图片上传前预览 -- FileReader
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
- DevExpress控件使用系列--ASPxUploadControl（图片上传及预览）
1.控件功能 列表控件展示数据.弹框控件执行编辑操作.Tab控件实现多标签编辑操官方说明 2.官方示例 2.1 ASPxImage http: ...
- uploadPreview 兼容多浏览器图片上传及预览插件使用
uploadPreview兼容多浏览器图片上传及预览插件 http://www.jq22.com/jquery-info2757 Html 代码 <div class="form-gr ...
- js实现图片上传及预览---------------------->>兼容ie6-8 火狐以及谷歌
<head runat="server"> <title>图片上传及预览(兼容ie6/7/8 firefox/chrome)</title> & ...
随机推荐
- python ——单下划线（约定）
命名规则: 通常使用小写单词,必要时用下划线分隔增加可读性. 使用一个前导下划线仅用于不打算作为类的公共接口的内部方法和实例变量. Python不强制要求这样; 它取决于程序员是否遵守这个约定. 使用 ...
- Mac 下Versions的 svn无法上传 .a 文件的问题
Xcode自带的svn和Versions以及一些其它工具都默认ignore".a"文件. 解决办法有两个: 方法一:使用命令行添加文件([转]原文在这) 1.打开终端,输入cd,空 ...
- java调用本地默认浏览器
1 http://blog.csdn.net/casularm/article/details/3401018 2
- Android项目：使用pulltorefresh开源项目扩展为下拉刷新上拉加载更多的处理方法，监听listview滚动方向
很多android应用的下拉刷新都是使用的pulltorefresh这个开源项目,但是它的扩展性在下拉刷新同时又上拉加载更多时会有一定的局限性.查了很多地方,发现这个开源项目并不能很好的同时支持下拉刷 ...
- karma + phantom + mocha + sion + chai + nightwatch + selenium2(webdriver) 测试框架学习
第三方的教程传送门 https://segmentfault.com/a/1190000004558796 karma # github https://github.com/karma-runner ...
- swift中代理的使用
1.首先定义一份协议. protocol HttpToolProrocol{ //1.代理方法,将server返回的字典传递给调用者 func didRecieveResults(result:NSD ...
- SpringCloud如何配置Eureka授权
现在已经成功的实现了一个Eureeka的服务启动以及微服务的注册配置操作,但是现在的程序有一个问题,你自己公司的Eureka服务应该可以注册的服务只能够是满足于认证要求的微服务,所有这样来在之前所进行 ...
- Weka学习之关联规则分析
步骤: (一) 选择数据源 (二)选择要分析的字段 (三)选择需要的关联规则算法 (四)点击start运行 (五) 分析结果 算法选择: Apriori算法参数含义 1.car:如果设为真,则会挖掘类 ...
- git 和 svn 的比较
Git VS SVN 1 .功能 主体功能 Git SVN 1.从服务器上克隆完整的Git仓库(包括代码和版本信息)到单机上. 1 .SVN是基于关系数据库的(BerkleyDB)或一系列二进制 ...
- PHP中常见的几种运行代码的方式
常见的运行程序的方法有 shell_exec ``(反引号) eval system exec passthru 下面分别介绍他们的用法: 名称 解释 返回值 注意 shell_exec 通过 she ...