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]实现图片上传并预览的更多相关文章

  1. JQuery插件：图片上传本地预览插件，改进案例一则。

    /* *名称:图片上传本地预览插件 v1.1 *作者:周祥 *时间:2013年11月26日 *介绍:基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari *插 ...

  2. ASP.NET MVC图片上传前预览

    回老家过春节,大半个月,在家的日子里,吃好睡好,人也长了3.5Kg.没有电脑,没有网络,无需写代码,工作上相关的完全放下......开心与父母妻儿过个年,那样的生活令Insus.NET现在还在留恋.. ...

  3. 图片上传本地预览。兼容IE7+

    基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari 预览地址:http://www.jinbanmen.com/test/1.html js代码:/**名称 ...

  4. input file实现多选，限制文件上传类型，图片上传前预览功能

    限制上传类型 & 多选:① accept 属性只能与 <input type="file" /> 配合使用.它规定能够通过文件上传进行提交的文件类型. ② mu ...

  5. 一、简单的图片上传并预览功能input[file]

    一.简单的图片上传并预览功能input[file] <!DOCTYPE html> <html lang="en"> <head> <me ...

  6. html之file标签 --- 图片上传前预览 -- FileReader

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  7. DevExpress控件使用系列--ASPxUploadControl（图片上传及预览）

        1.控件功能     列表控件展示数据.弹框控件执行编辑操作.Tab控件实现多标签编辑操官方说明 2.官方示例       2.1 ASPxImage                http: ...

  8. uploadPreview 兼容多浏览器图片上传及预览插件使用

    uploadPreview兼容多浏览器图片上传及预览插件 http://www.jq22.com/jquery-info2757 Html 代码 <div class="form-gr ...

  9. js实现图片上传及预览---------------------->>兼容ie6-8 火狐以及谷歌

    <head runat="server"> <title>图片上传及预览(兼容ie6/7/8 firefox/chrome)</title> & ...

随机推荐

  1. react-native 创建 ios 项目

    创建React-Native项目 打开终端输入react-native init ProjectName,这里的ProjectName可以改成你想创建的项目名称.然后有两种方法启动项目 1.从终端开启 ...

  2. jQuery异步框架探究2:jQuery.Deferred方法

    (本文针对jQuery1.6.1版本号)关于Deferred函数的描写叙述中有一个词是fledged,意为"羽翼丰满的",说明jQuery.Deferred函数应用应该更成熟. 这 ...

  3. 3、Linux内核模块学习

    一.内核模块的学习   内核的整体框架是非常的大,包含的组件也是非常多,如何将需要的组件包含在内核中呢?选择一,就是将所有的组件全部编译进内核,虽然需要的组件都可以使用,但是内核过分庞大,势必带来效率 ...

  4. 本地文件上传到linux

    首先下载插件,输入下面命令: yum -y install lrzsz 然后输入rz选择上传文件: rz 如果rz命令不好使的话,就输入: rz -be

  5. Linux系统控制文件 /etc/sysctl.conf详解

    /etc/sysctl.conf这个目录主要是配置一些系统信息,/etc/sysctl.conf参数解释: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1 ...

  6. 【Hadoop基础教程】4、Hadoop之完全分布式环境搭建

    上一篇blog我们完成了Hadoop伪分布式环境的搭建,伪分布式模式也叫单节点集群模式, NameNode.SecondaryNameNode.DataNode.JobTracker.TaskTrac ...

  7. Atitit swt 4.3 4.4 4.5 新特性java attilax总结

    Atitit swt 4.3 4.4 4.5 新特性java attilax总结 1. 4.5 Release - June 3, 20151 1.1. Older Releases1 2. SWT  ...

  8. 《HBase in Action》 第二章节的学习总结 ---- HBase基本组成

    准备工作:采用的HBase版本是:CDH4.5,其中的Hadoop版本是:hadoop-2.0.0-cdh4.5.0:HBase版本是:hbase-0.94.6-cdh4.5.0: Hbase的配置文 ...

  9. e.target与e.currentTarget对比

    复制以下代码,即可查看效果 <!DOCTYPE html> <html> <head lang="en"> <meta charset=& ...

  10. python语言特性-------python2.7教程学习【廖雪峰版】（一）

    开始学习廖雪峰的py2.7教程: 2017年6月5日12:54:28 笔记: 廖雪峰python2.7教程1.用任何编程语言来开发程序,都是为了让计算机干活.  2.Python是一种相当高级的语言. ...