简单的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. 升级Linux tar &&解决某用tar解压失败的tar包

    今天解压个文件,出来很多这样的: /bin/tar: Ignoring unknown extended header keyword `SCHILY.dev'/bin/tar: Ignoring u ...

  2. Linux 虚拟机安装后的配置和一些命令符笔记

    一.安装后的配置 1.设在终端的字体为等宽字体 比如:DejaVu Sans Mono 2.将当前的普通用户加入到sudo用户组adduser en sudochmod +w /etc/sudoers ...

  3. Java http请求和调用

    关于http get和post请求调用代码以及示例. 参考:http://www.cnblogs.com/zhuawang/archive/2012/12/08/2809380.html http请求 ...

  4. MySQL所学所思所想

    MySQL更改线上配置方案思想:原则上,需要备机.备份工作准备到位,有参数调优配置方案.有配置回退方案.有应急切换备机方案.以上方案评审无问题,然后可以和客户约定实施的时间.服务中断时间,先向客户侧申 ...

  5. 【转】Spark Streaming和Kafka整合开发指南

    基于Receivers的方法 这个方法使用了Receivers来接收数据.Receivers的实现使用到Kafka高层次的消费者API.对于所有的Receivers,接收到的数据将会保存在Spark ...

  6. 机器学习-KNN分类器

    1.  K-近邻(k-Nearest Neighbors,KNN)的原理 通过测量不同特征值之间的距离来衡量相似度的方法进行分类. 2.  KNN算法过程 训练样本集:样本集中每个特征值都已经做好类别 ...

  7. PyCharm基本操作

    1.1 PyCharm基本使用 视频学习连接地址:http://edu.51cto.com/course/9043.html 1.1.1 在Pycharm下为你的Python项目配置Python解释器 ...

  8. DotNetCore跨平台~一起聊聊Microsoft.Extensions.DependencyInjection

    写这篇文章的心情:激动 Microsoft.Extensions.DependencyInjection在github上同样是开源的,它在dotnetcore里被广泛的使用,比起之前的autofac, ...

  9. jS判断浏览器终端

    在做移动端项目的时候,常常会遇到需要判断页面浏览终端的需求.要想判断是什么浏览器终端,先打印 navigator.userAgent 出来.所以收集了几种比较常用的方法: if(/(iPhone|iP ...

  10. springboot高并发redis细粒度加锁(key粒度加锁)

    本文探讨在web开发中如何解决并发访问带来的数据同步问题. 1.需求: 通过REST接口请求并发访问redis,例如:将key=fusor:${order_id} 中的值+1: 2.场景: 设想,多线 ...