简单的jQuery实现input file选择图片后，可以预览图片的效果

简单的HTML代码：

<div>

<img src="" class="img">

</div>

<input type="file" class="imgInput">

　　注：img就是用来显示预览图片的

然后就是jQuery代码，很简单

$(".imgInput").change(function(){

	$(".img").attr("src",URL.createObjectURL($(this)[0].files[0]));

});

　　然后就实现了选择图片后可以预览图片的效果了

其中需要注意的是使用的是DOM元素，jQuery元素和DOM元素之间的转换

input file选择图片后 预览的更多相关文章

  1. type="file" 选择图片后预览

    function setImagePreview(avalue) { var docObj = document.getElementById("doc"); var imgObj ...

  2. Input File选择图片后，未保存预览

    今天实现上传图片到服务器 简单的jQuery实现input file选择图片后,可以预览图片的效果 简单的HTML代码: <div> <img src="" cl ...

  3. js实现FileUpload选择图片后预览功能

    当asp.net的FileUpload选择一个图片后不需要上传就能显示出图片的预览功能, 代码: <%@ Page Language="C#" AutoEventWireup ...

  4. html选择图片后预览，保存并上传

    html代码:------------------添加-------------------------- accept="image/gif,image/jpeg,image/jpg,im ...

  5. 巧用weui.gallery()，点击图片后预览图片

    要在页面需要加载的JS文件: <script src="../js/libs/weui.min.js"></script> 可以去weui的文档中下载,这是 ...

  6. android系统webview使用input实现选择文件并预览

    一般系统的实现方式: 代码实现 <!doctype html> <html> <head> <meta charset="utf-8"&g ...

  7. 在Vue项目中 选择图片并预览

    最近开始使用vue做项目 在这个过程中,碰到了大多数做前端肯定经历的一个问题,就是文件上传预览 花了点时间解决,因此分享一下预览功能的解决方案 页面: <div class="sele ...

  8. input type=file 选择图片并且实现预览效果的实例

    为大家带来一篇input type=file 选择图片并且实现预览效果的实例. 通过<input />标签,给它指定type类型为file,可提供文件上传: accept:可选择上传类型, ...

  9. vue使用readAsDataURL实现选择图片文件后预览

    vue实现选择图片文件后预览 利用h5的api可以实现选择文件并实现预览 readAsDataURL 方法会读取指定的 Blob 或 File 对象.读取操作完成的时候,readyState 会变成已 ...

随机推荐

  1. python写的一段分页的代码

    代码: from django.utils.safestring import mark_safe class Paginator(object): def __init__(self,current ...

  2. Node.js 异步异闻录

    本文首发在个人博客:http://muyunyun.cn/posts/7b9fdc87/ 提到 Node.js, 我们脑海就会浮现异步.非阻塞.单线程等关键词,进一步我们还会想到 buffer.模块机 ...

  3. JMeter基础之—录制脚本

    Jmeter 是一个非常流行的性能测试工具,虽然与LoadRunner相比有很多不足,比如:它结果分析能力没有LoadRunner详细:很它的优点也有很多: l       开源,他是一款开源的免费软 ...

  4. Zabbix 添加脚本检测IP变化

    监控环境 IP和HOSTNAME 有时会有变化.但目前是通过IP地址监控,不是DNS名,添加一个外部脚本,发现IP和HOSTNAME发生变化时告警. vim /usr/local/etc/zabbix ...

  5. String StringBuffer StringBuilder 之间的区别

    StringBuffer与StringBuilder的区别: StringBuffer是jdk1.0版本出来的,线程安全,效率低 StringBuilder是jdk1.5版本出来的,线程不安全,效率高 ...

  6. Hello PyQt5

    在 ubuntu 系统上 GUI 编程,PyQt5 是个不错的选择.首先,当然是安装 PyQt5 了.终端输入命令: pip3 install PyQt5 即可. 1. 建立一目录 x01.PyQtH ...

  7. js函数基础知识

    [函数的声明及调用] function 函数名(参数1,参数2,....){ //函数体代码 return返回值: } 1.函数的调用: ①直接调用:函数名(参数1的值,参数2的值,....) ②事件 ...

  8. openEntityForm时候如何给关于(regardingobjectid)类型查找字段赋值？

    本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复264或者20170924可方便获取本文,同时可以在第一间得到我发布的最新的博文信息,follow me!我的网站是 www.luoyong.me ...

  9. JAVA多线程---ThreadLocal<E>

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px ".SF NS Text" } tips: 1 当前ThreadLocal ...

  10. java中堆栈的功能作用 以及區別（搜集）

    1.用new创建的对象在堆区,函数中的临时变量在栈区,Java中的字符串在字符串常量区. 2.栈:存放进本数据类型的数据和对象的引用,但对象本身不存在栈中,而是存放在堆中.     堆:存放new产生 ...