简单的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. 用vue开发一个app（3，三天的成果）

    前言 一个vue的demo 源码说明 项目目录说明 . |-- config // 项目开发环境配置 | |-- index.js // 项目打包部署配置 |-- src // 源码目录 | |-- ...

  2. Local Binary Convolutional Neural Networks ---卷积深度网络移植到嵌入式设备上？

    前言:今天他给大家带来一篇发表在CVPR 2017上的文章. 原文:LBCNN 原文代码:https://github.com/juefeix/lbcnn.torch 本文主要内容:把局部二值与卷积神 ...

  3. 如何面试 PHP 工程师？

    1,解决问题的能力和掌握的知识,看你招聘的目的而决定其二者的平衡.了解流体力学的确会对通下水道有很大帮助,但流体力学专家未必都会疏通下水道. 2,创造力,一个没有自己作品的程序员不是好程序员.编程跟写 ...

  4. mysql用户权限配置

    创建管理员: mysqladmin -u root password 123456 登录 mysql -u root -p 建库及授权 > create database bdp charact ...

  5. 数据分析前戏：ipython使用技巧（上）

    不一定非得使用Jupyter Notebook,试试ipython命令行 安装 ipython 我只试过Windows 10环境下的. 1.安装python安装包之后,应该就有ipython了. 2. ...

  6. Knapsack I 竟然是贪心，证明啊。。。。

    Knapsack I Time Limit: 2000/1000MS (Java/Others) Memory Limit: 128000/64000KB (Java/Others) SubmitSt ...

  7. Palindrome poj3974

    Palindrome Time Limit: 15000MS   Memory Limit: 65536K Total Submissions: 3280   Accepted: 1188 Descr ...

  8. html基础知识笔记

    HTML基础 1.1HTML文件的基本结构和W3C标准 1.1.1HTML简介 HTML是一种描述网页的语言,一种超文本标记的语言! 1.1.2HTML文件的基本结构 头部(head) 头部是网页的标 ...

  9. Jquery插件之ajaxForm ajaxSubmit的理解用法（转）

    我们在平常使用Jquery异步提交表单,一般是在submit()中,使用$.ajax进行.比如: $(function(){ $('#myForm').submit(function(){ $.aja ...

  10. Response.Write输出导致页面变形和页面白屏解决办法

    方法一:此方法应该是微软官方推荐的方法,但弹出时会造成页面白屏.Page.RegisterStartupScript("TestEvent", "<script&g ...