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> & ...

随机推荐

lodash 数组裁剪 drop
_.drop(array, [n=1]) 裁剪数组中的前 N 个数组,返回剩余的部分. <!DOCTYPE html> <html lang="zh"> & ...
【Excle数据透视表】如何在Excle中使用数据鼠标拖放
数据透视表建立好之后,我们有时候需要改动数据透视表,那么直接可以对字段进行拖拽就可以改变,这样使数据透视变得比较方便使用原始样式拖拽后样式步骤右键数据透视表任意单元格→数据透视表选项→显示→经 ...
简单的 nginx 多站点配置
测试环境:基于CentOS6.8 编译安装LNMP(http://www.cnblogs.com/afee666/p/6836161.html) 一需求在一个 VPS 主机上配置 web 服务器, ...
Python GUI之tkinter窗口视窗教程大集合（看这篇就够了） JAVA日志的前世今生 .NET MVC采用SignalR更新在线用户数 C#多线程编程系列（五）- 使用任务并行库 C#多线程编程系列（三）- 线程同步 C#多线程编程系列（二）- 线程基础 C#多线程编程系列（一）- 简介
Python GUI之tkinter窗口视窗教程大集合(看这篇就够了) 一.前言由于本篇文章较长,所以下面给出内容目录方便跳转阅读,当然也可以用博客页面最右侧的文章目录导航栏进行跳转查阅. 一.前言 ...
android dp 和 px 的相互转换
在开发中,可能须要动态设置控件的大小比如为一个gridview设置宽度: LinearLayout.LayoutParams linearParams2 = (LinearLayout.Layout ...
Android分享功能的一点总结
前段时间给曾经的App加了分享功能,与大家分享一些心得. 实现分享功能有三种方式: 1.调用Android自带的分享接口.这样的方式最简单.它是直接调用App的发信息功能,把我们的链接通过信息方式发出 ...
Atitit. Atiposter 发帖机版本历史编年史
Atitit. Atiposter 发帖机版本历史编年史 V1 初步实现sina csdn cnblogs V2 实现qzone sohu 的发帖功能顺便重构接口实现分离 V3多文件循环发帖 ...
PDO中捕获SQL语句中的错误
使用默认模式-----PDO::ERRMODE_SILENT 在默认模式中设置PDOStatement对象的errorCode属性,但不进行其它不论什么操作. 比如: 通过prepare()和exec ...
MySQL八:视图、触发器、事物、存储过程、函数
阅读目录一视图二触发器三事务四储存过程五函数六流程控制一视图视图是一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需使用[名 ...
使用strace,lstrace,truss来跟踪程序的运行过程
使用truss.strace或ltrace诊断软件问题 2008-07-05 16:25 使用truss.strace或ltrace诊断软件问题进程无法启动,软件运行速度突然变慢, ...

jQuery：[1]实现图片上传并预览