input预览上传图片
html代码
<input type="file" name="file" id="file" >
<img src="" id="img">
js代码
$("#file").bind("change",function(){
var url = null;
if(window.createObjectURL != undefined) {
url = window.createObjectURL(this.files[0]);
} else if(window.URL != undefined) {
url = window.URL.createObjectURL(this.files[0]);
} else if(window.webkitURL != undefined) {
url = window.webkitURL.createObjectURL(this.files[0]);
}
$("#img").attr("src",url);
})
input预览上传图片的更多相关文章
- html5 ajax多图片可预览上传图片
最近不是特别忙,我就利用html5写了个上传图片(或其他文件)的页面,主要利用是html5的file api,此页面比较简陋,没做样式的优化,包含上传图片预览,多图片上传,上传进度条(利用html5的 ...
- js预览上传图片
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- IE8/9 本地预览上传图片
本地预览的意思是,在选择图片之后先不上传到服务器,而是由一个<img>标签来预览本地的图片,非 IE8/9 浏览器可以从<input type="file"/&g ...
- js 压缩 预览 上传图片
com.js export const compressImage=function (files,fn,preCallbackFn,i) { let newfile = files.files[0] ...
- PHP jQuery实现上传图片时预览图片的功能实例
在PHP项目开发中,有时候经常需要做添加图片的功能.添加图片时,一般需要即时预览上传的图片.下面这个例子就是简单的预览上传图片功能,代码如下(分两部分): 1.HTML代码: <div clas ...
- 适用于各浏览器支持图片预览,无刷新异步上传js插件
文件上传无疑是web应用中一个非常常用的功能,不管是PHP.jsp还是aspx.mvc等都会需要文件上传,但是众所周知当使用自带的文件上传功能时总会出现页面刷新的情况.当然现在有了html5这个好东西 ...
- input上传图片(file),预览图片的两种方法。blob与base64编码
上传图片时一般都需要预览,我一般用这两种方法来实现.base64编码可以直接上传到后台,后台解析下,得到的文件就会比较小了,省去了压缩图片这一步了. //获取对象input file 的图片地址,放进 ...
- 前端实现input[type='file']上传图片预览效果
众所周知JavaScript在设计上处于安全角度考虑,是不允许读写本地文件的(原因请自行百度): 但是在实际项目应用中,经常会使用到上传图片,并且可以让用户直接预览图片.对于此种做法有两种方法可以实现 ...
- vue <input type="file">上传图片、预览、删除
使用原生<input type="file">上传图片.预览.删除:multiple实现可上传多张 参数名 类型 说明 fileTypes Array 文件类型, 默认 ...
随机推荐
- 0502-Hystrix保护应用-简介,使用,健康指标等
一.概述 参看地址:https://cloud.spring.io/spring-cloud-static/Edgware.SR3/single/spring-cloud.html#_circuit_ ...
- JVM虚拟机—JVM内存
JVM在运行时将数据划分为了5个区域来存储,这5个区域图示如下: 其中方法区和堆对是所有线程共享的内存区域:而java栈.本地方法栈和程序员计数器是运行时线程私有的内存区域. 首先我们熟悉一下一个 J ...
- GET和POST请求区别
关于http协议GET和POST方法的区别我们可以从各处得到比较一致的答案,今天我们来填一个面试中可能碰到的一个坑. 当面试官问你“你觉得GET和POST有什么区别"时,我们可能会想到以下几 ...
- python安装virtualenv
pip install virtualenv 为了使用更方便用,安装另外一个,windows下要-win,linux下不用 pip install virtualenvwrapper-win 使用方法 ...
- 吴超老师课程--Pig的介绍和安装
1.Pig是基于hadoop的一个数据处理的框架. MapReduce是使用java进行开发的,Pig有一套自己的数据处理语言,Pig的数据处理过程要转化为MR来运行. 2.Pig的数据处理语言是数 ...
- Appium做Android功能自动化测试
前言 做Android端功能自动化已有2年多的时间了,使用过的功能自动化框架有Robotium.Uiautomator.Appium.最近研究自动化case复用的方案,调研了Appium的自动化框架, ...
- delphi连接sql server的字符串2011-10-11 16:07
delphi连接sql server的字符串2011-10-11 16:07 一.delphi连接sql server 放一个连接组件 ADOConnection, 其它组件TADODataSet,T ...
- 20包含min函数的栈
题目描述 定义栈的数据结构,请在该类型中实现一个能够得到栈最小元素的min函数. 建一个辅助栈,把每次最小最小的元素(之前最小元素,与当前新入栈的元素比较)放在辅助栈里. import j ...
- No module named bz2
yum install bzip* python2.6 import bz2 python2.7 import bz2 error 解决:sudo cp /usr/lib64/python2.6/li ...
- 0927-转载:SSM:spring+springmvc+mybatis框架中的XML配置文件功能详细解释
这篇文章暂时只对框架中所要用到的配置文件进行解释说明,而且是针对注解形式的,框架运转的具体流程过两天再进行总结. spring+springmvc+mybatis框架中用到了三个XML配置文件:web ...