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

原理

预览思路

1.当上传对象的input被触发并选择本地图片之后获取要上传的图片对象的URL；

2.把对象URL赋值给实现写好的img标签的src属性

File对象

　　File对象可以用来获取文件的信息，还可以用来读取这个文件的内容，通常情况下，File对象是来自用户在一个input元素上选择文件后返回的FileList对象，也可以是来自由拖放操作生成的DataTransfer对象。

Blob对象

　　Blob对象是一个包含由只读原始数据的类文件对象，Blob对象中的数据并不一定得是JavaScript中的原生形式。File接口基本Blob，继承了Blob的功能，并且扩展了支持用户计算机上的本地文件，我们想要得到的对象URL实际上就是从Blob这个对象获取的。

实例

代码

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.      <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.      <script src="jquery-2.1.4.js"></script>
  8.      <title>Document</title>
  9.  </head>
  10.  <body>
  11.      <input id="upload" type="file">
  12.      <img id="preview" src="">
  13.      <script>
  14.          $('#upload').change(function(){
  15.              var obj = document.getElementById('upload').files[0];
  16.              var asrc = window.URL.createObjectURL(obj);
  17.              document.getElementById("preview").src = asrc;
  18.          })
  19.      </script>
  20.  </body>
  21.  </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. STL学习笔记（算法概述）

    算法头文件 要运用C++标准程序库的算法,首先必须包含头文件<algorithm> 使用STL算法时,经常需要用到仿函数以及函数配接器.它们定义域<functional>头文件 ...

  2. 远程链接mysql数据库

    mysql -P3306 -uroot -proot 显示最大连接数 show variables like '%max_connections%'; 设置最大链接数 ;//默认100--只对当前进程 ...

  3. android中依据不同分辨率dp和px的相互转算

    public class PxAndDp { /** * 依据手机的分辨率从 dp 的单位 转成为 px(像素) */ public static int dip2px(Context context ...

  4. 不得不看的Java代码性能优化总结

    原文:https://blog.csdn.net/mr_smile2014/article/details/50112723 前言 代码优化,一个很重要的课题.可能有些人觉得没用,一些细小的地方有什么 ...

  5. 在多线程的情况下是由Iterator遍历修改集合对象，报ConcurrentModificationException()异常的根因分析

    遍历List时抛ConcurrentModificationException异常原理分析     http://www.blogjava.net/houlinyan/archive/2008/04/ ...

  6. ASP.NET CORE RAZOR ：将搜索添加到 Razor 页面应用

    https://docs.microsoft.com/zh-cn/aspnet/core/tutorials/razor-pages/search 本文档中,将向索引页面添加搜索功能以实现按“流派”或 ...

  7. 利用NIO的Selector处理服务器-客户端模型

    package NIOTEST; import java.io.IOException; import java.net.InetAddress; import java.net.InetSocket ...

  8. freemarker 展示数据列表并传值给后台

    select id="initiatorId" name="initiatorId">                  <#if initiato ...

  9. PyCharm搭建Spark开发环境 + 第一个pyspark程序

    一, PyCharm搭建Spark开发环境 Windows7, Java 1.8.0_74, Scala 2.12.6, Spark 2.2.1, Hadoop 2.7.6 通常情况下,Spark开发 ...

  10. openWRT自学---自己编译的第一个 backfire10.03 版本的过程记录 --- 实际是由于下载了错误的backfire源码包导致的

    基于 backfire10.03(从http://downloads.openwrt.org/backfire/10.03/ 中下砸的源码包backfire_10.03_source.tar.bz2: ...