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 文件类型, 默认 ...
随机推荐
- error:No resource found that matches the given name 'Theme.AppCompat.Light'
一.stsckoverflow http://stackoverflow.com/questions/17870881/cant-find-theme-appcompat-light-for-new- ...
- golang 实现并发计算文件数量
package main import ( "fmt" "io/ioutil" "os" ) func listDir(path strin ...
- Python+Django+Bootstrap 框架环境搭建
1.安装python和pip(python.pip安装自行百度,pip是一个安装和管理 Python 包的工具) 2.配置python环境变量(python和scripts目录都需要配置) 3.安装D ...
- Python之初识函数(Day11)
一.函数的定义与调用 总结一: 定义:def 关键词开头,空格之后接函数名称和圆括号(),最后还有一个":". def 是固定的,不能变,必须是连续的def三个字母,不能分开... ...
- ceph存储安装配置
1.修改yum源: 1.安装yum源:sudo yum install -y yum-utils sudo yum-config-manager --add-repo https://dl.fedor ...
- ZOJ 3261 Connections in Galaxy War (逆向+带权并查集)
题意:有N个星球,每个星球有自己的武力值.星球之间有M条无向边,连通的两个点可以相互呼叫支援,前提是对方的武力值要大于自己.当武力值最大的伙伴有多个时,选择编号最小的.有Q次操作,destroy为切断 ...
- Linux中top和free命令(6/15)
top:命令提供了实时的对系统处理器的状态监视.它将显示系统中CPU最“敏感”的任务列表. 该命令可以按CPU使用.内存使用和执行时间对任务进行排序: 而且该命令的很多特性都可以通过交互式命令或者在个 ...
- v4l2 下载
To clone the master development repository, install git, and run: git clone git://github.com/torvald ...
- Java学习笔记50:JSONObject与JSONArray的使用(转)
Java不像PHP解析和生产JSON总是一个比较痛苦的过程.但是使用JSONObject和JSONArray会让整个过程相对舒服一些. 需要依赖的包:commons-lang.jar commons- ...
- Jenkins自动打包配置
当时也是花费了不少时间来配置Jenkins自动打包的问题,觉得还是需要记录一下. 1.安装Jenkins,这个很简单,不需要多说. 2.下载Git Plugin,Gradle Plugin,Andro ...