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> & ...
随机推荐
- Ros 中的多线程
参考文献:http://blog.csdn.net/sinat_27554409/article/details/48446611 老王说ROS http://blog.csdn.net/yake ...
- mysql返回记录的ROWNUM(转)
set @rownum = 0; select (@rownum := @rownum + 1) as rownum, name, scores from user order by scores ...
- LoadRunner lr_eval_string() 函数使用及LR中变量、参数的简单使用
lr_eval_string() 函数的主要作用:返回脚本中的一个参数当前的值, 返回值类型:char 一般多用在调试脚本时输出参数的值.具体用法如下:lr_output_message(" ...
- java精确除法计算,四舍五入 Java问题通用解决代码
主要用java.math.BigDecimal工具类实现,想要了解BigDecimal类可以看java api 正式版: public static Double divide() ...
- SQL数据库从高版本到低版本的迁移,同时解决sql脚本文件太大无法打开的尴尬问题
as we known,sql数据库高版本向低版本还原是不太可能但是又经常会碰到的事,今天实测了一种方法 步骤:任务—>生成脚本—> 下一步->高级,选择数据库版本和编写脚本数据类型 ...
- linux安全组配置
万网的是这样子配置的:
- Ubuntu16.04下搜狗输入法、Sublime Text 3的安装
Ubuntu16.04下搜狗输入法.Sublime Text 3的安装 一.搜狗输入法 1. 安装中文语言 默认在Ubuntu16.04下是没有中文的,需要安装中文,在System Settings- ...
- linux命令的别名alias,unalias
1. 别名 linux别名alias的作用: 1. 简化特别长得命令和參数 2. 对一些命令添加默认选项.提高安全性. 2. alias使用 [www@work sh]$ alias lm='ls - ...
- 【问题记录】springmvc国际化问题
异常-Cannot change HTTP accept header - use a different locale resolution strategy springmvc国际化时,local ...
- mapreduce中reduce中的迭代器只能调用一次。其实迭代器就只能调用一次
亲测,只能调用一次,如果想想在一次reduce重复使用迭代器中的数据,得先取出来放在list中然后在从list中取出来!!多次读取reduce函数中迭代器的数据 public static void ...