JQ图片文件上传之前预览功能
1、先准备一个div
onchange触发事件
<input type="file" onchange="preview(this)" ></span>
<div id="preview"></div>
2、写JS代码
//上传图片之前预览图片
function preview(file){
	if (file.files && file.files[0]){  
		var reader = new FileReader();  
		reader.onload = function(evt){  
			$("#preview").html('<img  src="' + evt.target.result + '" width="95px" height="50px" />');  
		}    
		reader.readAsDataURL(file.files[0]);  
	}else{
		$("#preview").html('<div style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>');  
	}  
}
JQ图片文件上传之前预览功能的更多相关文章
- JAVA图片批量上传JS-带预览功能
		
这篇文章就简单的介绍一个很好用的文件上传工具,批量带预览功能.直接贴代码吧,都有注释,很好理解. HTML页面 <!DOCTYPE html> <%@ taglib prefix=& ...
 - 微信小程序实现图片是上传、预览功能
		
本文实例讲述了微信小程序实现图片上传.删除和预览功能的方法,分享给大家供大家参考,具体如下: 这里主要介绍一下微信小程序的图片上传图片删除和图片预览 1.可以调用相机也可以从本地相册选择 2.本地实现 ...
 - 一、简单的图片上传并预览功能input[file]
		
一.简单的图片上传并预览功能input[file] <!DOCTYPE html> <html lang="en"> <head> <me ...
 - JavaScrip 原生多文件上传及预览 兼容多浏览器
		
JavaScrip 原生多文件上传及预览 兼容多浏览器 html代码块 <div class="container"> <label>请选择一个图像文件:& ...
 - form表单系列中文件上传及预览
		
文件上传及预览 Form提交 Ajax 上传文件 时机: 如果发送的[文件]:->iframe, jQurey(),伪Ajax 预览 import os img_path = os.path.j ...
 - input file实现多选,限制文件上传类型,图片上传前预览功能
		
限制上传类型 & 多选:① accept 属性只能与 <input type="file" /> 配合使用.它规定能够通过文件上传进行提交的文件类型. ② mu ...
 - ASP.NET MVC图片管理(上传,预览与显示)
		
先看看效果(下面gif动画制作有点大,5.71MB): 题外话:上面选择图片来源于Insus.NET的新浪微博:http://weibo.com/104325017 也是昨晚(2015-07-03)I ...
 - 基于HTML5和JSP实现的图片Ajax上传和预览
		
本文对如何实现使用Ajax提交"multipart/form"格式的表单数据,已经如何在图片上传之前,在浏览器上进行预览.使用的主要相关技术HTML5的FILE API,XMLHt ...
 - 原生JS实现图片上传并预览功能
		
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
 
随机推荐
- gulp使用2-gulp-less及watch和错误提示
			
gulpfile.js /** * Created by Administrator on 2017/4/4 0004. */ const gulp = require('gulp'), less = ...
 - DataGrid 如何得到DataGridRow 和DataGridCell 对象
			
第一行为不可编辑 DataGridRow row = (DataGridRow)dataGrid1.ItemContainerGenerator.ContainerFromIndex(0); ...
 - mac idea sbt工程打jar包
			
1.首先保证sbt已下载,否则下载homebrew:在命令行输入/usr/bin/ruby XXX ->下载完成后在终端输入brew install sbt ->安装完毕后可以打jar包 ...
 - live555_RTSP连接建立以及请求消息处理过程
			
1,RTSP连接的建立过程 RTSPServer类用于构建一个RTSP服务器,该类同时在其内部定义了一个RTSPClientSession类,用于处理单独的客户会话. 首先创建RTSP服务 ...
 - ABAP 内表数据 与 Json串 相互转换
			
内表: A B C IMINGZHA HAIMINGZ AIMINGZH 1 2 3 4 5 6 Json串: [{a: "IMINGZHA", b: "HAIMIN ...
 - [译]ASP.NET Core 2.0 中间件
			
问题 如何创建一个最简单的ASP.NET Core中间件? 答案 使用VS创建一个ASP.NET Core 2.0的空项目,注意Startup.cs中的Configure()方法: public vo ...
 - PyCharm 2017 官网 下载 安装 设置 配置 (主题 字体 字号) 使用 入门 教程
			
一.安装 Python 3.6 首先,要安装好 Python 3.6.如果你还没有安装,可以参考咪博士之前的教程 Python 3.6.3 官网 下载 安装 测试 入门教程 (windows) 二.官 ...
 - Git相关操作四
			
1.克隆远程仓库 git clone remote_location clone_name remote_location为仓库地址,clone_name为要克隆到本地的仓库名称. 2.显示对应克隆地 ...
 - 扩展Spring切面功能
			
概述 Spring的切面(Spring动态代理)在Spring中应用十分广泛,例如还有事务管理,重试等等.网上介绍SpringAop源码很多,这里假设你对SpringAop有基本的了解.如果你认为Sp ...
 - JAVA 的 Date、Calendar的常用用法
			
一.Date与String的互转用法,这里需要用到SimpleDateFormat Date date = new Date(); //设置格式 SimpleDateFor ...