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 ...
随机推荐
- java基础(Fundamental)
第一节 java开发环境 1.Linux操作系统 1)开源的操作系统.免费,主要作为服务器操作系统, 而Java主要是服务器端开发,所以部署环境都是Linux 2)Linux与Windows目录结构的 ...
- JFrame的层次结构以及背景颜色设置问题
JFrame的层次结构: JFrame:窗体,也就是窗口的框架.默认为不可见.不透明的(可以使用isVisible和isOpaque来验证).创建窗口时,最后一步需要调用setVisible(true ...
- PHP中include与require的特点和区别说明
引用文件的方法有两种:require 及 include.两种方式提供不同的使用弹性. require 的使用方法如 require("MyRequireFile.php"); . ...
- 定制自己的vue模版
前言 使用vue这个框架已经陆陆续续做了好几个项目了,不知不觉也已经在公司呆了4个月,转正了.时间如水...(省略一万字)./咳-不瞎扯了,公司是直接用的官方脚手架生成项目,官方模版没有vuex,ax ...
- C# winform小票打印
(1)自定义纸张设置 控制面板->打印机和传真->右键->服务器属性->创建新的格式 (2)自定义纸张使用 this.printDocument1.DefaultPageSet ...
- Python 中的装饰器
说到装饰器是我们每个学Python人中的心痛. 装饰器作用:是用来装饰其他函数的,为其他函数添加新功能. 原则:1.不能改变被修饰函数的源代码. 2.不能修改被修饰函数的调用方式. 学装饰器前还需要了 ...
- CloneZilla + Parkomat 实现网络备份
I. 准备 1. 下载 & 烧录 CloneZilla Live 前往 http://clonezilla.org/downloads.php 下载CloneZilla Live,有四个版本, ...
- [Python] Codecombat 攻略 Sarven 沙漠 (1-43关)截止至30关
首页:https://cn.codecombat.com/play语言:Python 第二界面:Sarven沙漠(43关)时间:4-11小时内容:算术运算,计数器,while循环,break(跳出循环 ...
- 【转】漫谈linux文件IO--io流程讲的很清楚
[转]漫谈linux文件IO--io流程讲的很清楚 这篇文章写的比较全面,也浅显易懂,备份下.转载自:http://blog.chinaunix.net/uid-27105712-id-3270102 ...
- [Python] 文科生零基础学编程系列二——数据类型、变量、常量的基础概念
上一篇:[Python] 文科生零基础学编程系列--对象.集合.属性.方法的基本定义 下一篇: (仍先以最简单的Excel的VBA为例,语法与Python不同,但概念和逻辑需要理解透彻) p.p1 { ...