简单的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. 爬虫实战:爬虫之 web 自动化终极杀手 ( 上)

    欢迎大家前往腾讯云技术社区,获取更多腾讯海量技术实践干货哦~ 作者:陈象 导语: 最近写了好几个简单的爬虫,踩了好几个深坑,在这里总结一下,给大家在编写爬虫时候能给点思路.本次爬虫内容有:静态页面的爬 ...

  2. 手机管家iPhoneX的适配总结

    WeTest 导读 随着苹果发布会的结束,Xcode的GM版也上线了,也意味着iPhoneX适配之旅的开始. 一.设计关注篇 注意设计的基本原则:(苹果呼吁的) 规格原帖:https://develo ...

  3. angularjs之ui-bootstrap的Datepicker Popup实现双日期选择控件

    最开始使用ui-bootstrap的Datepicker Popup日期选择插件实现双日期选择时间范围时,在网上搜了一些通过JS去实现的方法,不过后来发现可以不必通过JS去处理,只需要使用其自身的属性 ...

  4. Canvas+Video打造酷炫播放体验

    一.简介 直到现在,仍然不存在一项旨在网页上显示视频的标准. 今天,大多数视频是通过插件(比如 Flash)来显示的.然而,并非所有浏览器都拥有同样的插件. HTML5 规定了一种通过 video 元 ...

  5. Xcode 上传代码到GitHub

    几乎所有iOS程序员都上过GitHub寻找开源类库,的确,GitHub上有大量优秀的开源类库供大家学习.但是如何在Xcode中上传代码至GitHub呢? (开始之前先安装git,具体方法这里讲的很清楚 ...

  6. Undefined symbols for architecture arm64: "_OBJC_CLASS_$_WKWebView", referenced from: objc-c

    出现: Undefined symbols for architecture arm64: "_OBJC_CLASS_$_WKWebView", referenced from: ...

  7. Web的架构与html5基础知识

    图1:完整的Web应用构架 图2:html5的基本结构 head 可添加在头部标签元素有→→title meta style link base script noscript meta 几个重要属性 ...

  8. RobotFramework自动化测试框架-移动手机自动化测试Click Element关键字的使用

    Click Element关键字用来模拟点击APP界面上的一个元素,该关键字接收一个参数[ locator ] ,这里的locator指的是界面元素的定位方式. 示例1:使用Click Element ...

  9. 我的第一个python web开发框架(5)——开发前准备工作(了解编码前需要知道的一些常识)

    中午吃饭时间到了,小白赶紧向老菜坐的位置走过去. 小白:老大,中午请你吃饭. 老菜:哈哈...又遇到问题了吧,这次得狠狠宰你一顿才行. 小白:行行行,只要您赏脸,米饭任吃,嘻嘻,我们边走边聊. ... ...

  10. node-Telnet

    什么是Telnet(window系统) 使用Telnet工具作为客户端对创建的TCP服务器进行会话交流时遇到的问题做一个简单的记录.希望可以帮助到一些同学. 这里看一下百度词条的解释 Telnet协议 ...