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 ...
随机推荐
- IO模型分析
html { font-family: sans-serif } body { margin: 0 } article,aside,details,figcaption,figure,footer,h ...
- python对列表的联想
python的列表与字典,已经接触无数次了.但是很多用法都记不住,个人觉得归根原因都是只是学了知识点而少用,也少思考.在此试图用宫殿记忆法对它们的用法做个简单的梳理. 首先,说说列表的删除,删除有三种 ...
- 怎样清理c盘垃圾
休眠文件清理 休眠文件(hiberfil.sys)是,当你的电脑进入休眠状态时,系统临关闭前会将所有内存内容写入hiberfil.sys文件.当你重新打开电脑时,系统在将hiberfil.sys文件内 ...
- gulp使用1-入门指南
入门指南 1. 全局安装 gulp: $ npm install --global gulp 或使用cnpm 2. 作为项目的开发依赖(devDependencies)安装: $ npm instal ...
- QQ--基于TCP/UDP协议的通讯原理
QQ是一个基于TCP/UDP协议的通讯软件 发送消息的时候是UDP打洞,登陆的时候使用HTTP~因为登陆服务器其实就是一个HTTP服 务器,只不过不是常用的那些,那个服务器是腾讯自行开发的! 一 ...
- 启用事务操作,解决批量插入或更新sqlite,mssql等数据库耗时问题
private void button1_Click(object sender, EventArgs e) { //Sqlite使用事务批量操作 极大的提高速度 DateTime starttime ...
- 标准输入输出 stdio 流缓冲
**From : http://www.pixelbeat.org/programming/stdio_buffering/** 我发现找出标准流用的是什么缓冲是一件困难的事. 例如下面这个使用uni ...
- 实验:实现https
实现https 环境 1.三台主机分别为A,B,C. 2.A主机设置为CA和DNS服务器,ip为192.168.213.129 3.B主机为client,ip为192.168.213.253 4.C主 ...
- 重学C语言---04字符串和格式化输入/输出
1.程序示例 //talkback.c一个能为你提供一些信息的对话框 #include <stdio.h> #include <string.h> //提供strlen函数原型 ...
- 表单处理的方案与注意事项(servlet)
摘要 表单是后端程序员用的与接触最多的,我这里例举了常用处理办法,与注意事项 sevlet处理代码 package myform; import java.io.IOException; import ...