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 文件类型, 默认 ...
随机推荐
- composer 常用包管理工具
名称 用途说明 说明地址 mashape/unirest-php 简单易用的HTTP请求库 官网地址 guzzlehttp/guzzle 功能强大的HTTP请求库 文档 hassankhan/conf ...
- nginx灰度环境
1.nginx.conf split_clients "${remote_addr}AAA" $request_type { 25% "abtest"; * & ...
- Python(面向对象编程4——继承顺序、封装)
继承顺序 ''' 一点需要注意 ''' class Father: def f1(self): print("test func followed ==>") self.te ...
- linux crontab命令 自动下载文件
#crontab -e#download stock data, Mon-Fri, 9:15 - 11:30, 13:00 - 15:0015,30,40,50 9 * * 1-5 (cd /home ...
- HDU 6319 Ascending Rating (单调双端队列)
题意:给定一个序列a[1..n],对于每个长度为m的连续子区间,求出区间的最大值和从左往右扫描该区间最大值的变化次数. 分析:先O(n)处理出整个序列的值.求出每个长度为m的连续区间中的最大值可以用单 ...
- 设计模式(六) xml方式实现AOP
1.1. Aop, aspect object programming 面向切面编程 功能: 让关注点代码与业务代码分离! 关注点, 重复代码就叫做关注点: 切面, 关注点形成的类,就叫切面(类) ...
- AngularJS post传值后台获取不到
AngularJS post传值后台获取不到 一般的思路: 解决办法: 1.设置一下default head 2.参数转换一下data:$.param({orderNo: orderNo,sessi ...
- hadoop07---synchronized,lock
synchronized 锁是jvm控制的,控制锁住的代码块只能有一个线程进入.线程执行完了锁自动释放,抛出异常jvm会释放锁. synchronized的缺陷 1.如果一个线程被阻塞了,其余的线程 ...
- vue-scroller的使用
一 安装 使用npm 安装 npm install vue-scroller -S 二 引入 https://www.jianshu.com/p/a39f5276ff0b https://www.np ...
- Django学习笔记之Django Form表单
Form介绍 我们之前在HTML页面中利用form表单向后端提交数据时,都会写一些获取用户输入的标签并且用form标签把它们包起来. 与此同时我们在好多场景下都需要对用户的输入做校验,比如校验用户是否 ...