input file选择图片后 预览
简单的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选择图片后 预览的更多相关文章
- type="file" 选择图片后预览
function setImagePreview(avalue) { var docObj = document.getElementById("doc"); var imgObj ...
- Input File选择图片后,未保存预览
今天实现上传图片到服务器 简单的jQuery实现input file选择图片后,可以预览图片的效果 简单的HTML代码: <div> <img src="" cl ...
- js实现FileUpload选择图片后预览功能
当asp.net的FileUpload选择一个图片后不需要上传就能显示出图片的预览功能, 代码: <%@ Page Language="C#" AutoEventWireup ...
- html选择图片后预览,保存并上传
html代码:------------------添加-------------------------- accept="image/gif,image/jpeg,image/jpg,im ...
- 巧用weui.gallery(),点击图片后预览图片
要在页面需要加载的JS文件: <script src="../js/libs/weui.min.js"></script> 可以去weui的文档中下载,这是 ...
- android系统webview使用input实现选择文件并预览
一般系统的实现方式: 代码实现 <!doctype html> <html> <head> <meta charset="utf-8"&g ...
- 在Vue项目中 选择图片并预览
最近开始使用vue做项目 在这个过程中,碰到了大多数做前端肯定经历的一个问题,就是文件上传预览 花了点时间解决,因此分享一下预览功能的解决方案 页面: <div class="sele ...
- input type=file 选择图片并且实现预览效果的实例
为大家带来一篇input type=file 选择图片并且实现预览效果的实例. 通过<input />标签,给它指定type类型为file,可提供文件上传: accept:可选择上传类型, ...
- vue使用readAsDataURL实现选择图片文件后预览
vue实现选择图片文件后预览 利用h5的api可以实现选择文件并实现预览 readAsDataURL 方法会读取指定的 Blob 或 File 对象.读取操作完成的时候,readyState 会变成已 ...
随机推荐
- C#调用AForge实现摄像头录像
1: 首先下载库文件>> 也可以去官网寻找>> 下载本教程全代码>> 输出为MP4需要用到ffmpeg相关的文件,我打包的库已经带了,去官网找的库可以在这个目录找到 ...
- 理解G1垃圾回收日志
本篇文章主要介绍在-XX:+PrintGCDetails选项的情况下G1 GC log打印的信息.(注:本文假设读者对G1算法的基本原理已经有所了解) 下面是一段G1垃圾收集器相关的log信息 0.5 ...
- 框架应用:Spring framework (一) - IoC技术
IoC概念以及目标 IoC就是让原本你自己管理的对象交由容器来进行管理,其主要的目的是松耦合. IoC发展史 既然IoC的目标是为了松耦合,那它怎么做到的? 最后目标:降低对象之间的耦合度,IoC技术 ...
- Sql Server——数据的增删改
所谓数据的增删改就是在创建好数据库和表后向表中添加数据.删除表中的数据.更改表中的一些数据. 新增数据: 语法一: insert into 表名 values (数据内容) --这里需要 ...
- java 反射 类装载器
前言: java语言允许通过程序化的方式间接对Class进行操作,Class文件由类装载器装载后,在jvm中将形成一份描述Class结构的元信息对象,通过该元信息对象可以获知Class的结构信息,如构 ...
- springmvc 格式化返回日期格式
<mvc:annotation-driven conversion-service="conversionService"> <mvc:message-conve ...
- Dynamic Inversions 50个树状数组
Dynamic Inversions Time Limit: 30000/15000MS (Java/Others) Memory Limit: 128000/64000KB (Java/Others ...
- [Sdoi2010]星际竞速
个人对山东省选已经十分无语了,做了三道题,都TM是费用流,这山东省选是要干什么,2009--2011连续三年,只要会费用流,然后建个边,跑一跑就过了. 10 年一度的银河系赛车大赛又要开始了.作为全银 ...
- Python二维数据分析
一.numpy二维数组 1.声明 import numpy as np #每一个[]代表一行 ridership = np.array([ [ 0, 0, 2, 5, 0], [1478, 3877, ...
- ASP.NET没有魔法——ASP.NET MVC 与数据库之MySQL
之前介绍了My Blog如何使用ADO.NET来访问SQL Server获取数据.本章将介绍如何使用My SQL来完成数据管理. 在使用My SQL之前需确保开发环境中安装了My SQL数据库和Con ...