简单的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. 为什么你需要将代码迁移到ASP.NET Core 2.0?

    随着 .NET Core 2.0 的发布,.NET 开源跨平台迎来了新的时代.开发者们可以选择使用命令行.个人喜好的文本编辑器.Visual Studio 2017 15.3 和 Visual Stu ...

  2. java文档操作

    背景:因是动态报表,1)作成excel模版2)数据填充3)转化为PDF提出解决方法:[open source]1)Apache Poi+I text2) JodConvert+OpenOffice/l ...

  3. 转自知乎(JAVA后台开发可以纯粹用JAVA SE吗?)

    著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处.作者:巴多崽链接:http://www.zhihu.com/question/29663744/answer/45154839来源: ...

  4. oracle数据库备份、还原 (如何将Oracle 11g备份的dat文件导入到10g数据库里面)

    如何将Oracle 11g备份的dat文件导入到10g数据库里面 解决方法:      导出的时候后面加上目标数据库的版本号   导出: 在SQL plus下执行:create or replace  ...

  5. ArrayList ConcurrentModificationException

    1.ConcurrentModificationException ConcurrentModificationException 出现在使用 ForEach遍历,迭代器遍历的同时,进行删除,增加出现 ...

  6. C++ static成员变量与static成员函数

    类中的静态成员真是个让人爱恨交加的特性.我决定好好总结一下静态类成员的知识点,以便自己在以后面试中,在此类问题上不在被动. 静态类成员包括静态数据成员和静态函数成员两部分.  一 静态数据成员:  类 ...

  7. JQuery实现banner图滚动

      前  言           jQuery是一个功能强大的库,提供了开发JavaScript项目所需的所有核心函数.很多时候我们使用jQuery的原因就是因为其使用插件的功能,然而,有时候我们还是 ...

  8. 1523. K-inversions URAL 求k逆序对,,,,DP加树状数组

    1523. K-inversions Time limit: 1.0 secondMemory limit: 64 MB Consider a permutation a1, a2, …, an (a ...

  9. 大牛教你用3行HTML代码卡死一台机器

    前言 学习web渗透测试等安全工作的朋友们,想必大部分接触的最早的就是HTML了. 其实学过html的朋友们都知道,html中可以插入JavaScript代码,而对于JavaScript代码,这里就不 ...

  10. spring 内部工作机制(二)

    本章节讲Spring容器从加载配置文件到创建出一个完整Bean的作业流程及参与的角色. Spring 启动时读取应用程序提供的Bean配置信息,并在Spring容器中生成一份相应的Bean配置注册表, ...