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 文件类型, 默认 ...
随机推荐
- static关键字注意事项
/* static关键字注意事项 A:在静态方法中是没有this关键字的 如何理解呢? 静态是随着类的加载而加载,this是随着对象的创建而存在. 静态比对象先存在. B:静态方法只能访问静态的成员变 ...
- 008-shiro与spring web项目整合【二】认证、授权、session管理
一.认证 1.添加凭证匹配器 添加凭证匹配器实现md5加密校验. 修改applicationContext-shiro.xml: <!-- realm --> <bean id=&q ...
- Ubuntu 16.04 安装 JDK 及 Eclipse 详细步骤(转发:https://blog.csdn.net/bluish_white/article/details/56509446)
2017.3.1更新 修正了一些命令,现在按照文章步骤配置不会出现问题了. JDK 安装及配置 参考来源:http://www.linuxidc.com/Linux/2017-02/140908.ht ...
- JAVA 读取txt文件内容
原文地址https://www.cnblogs.com/xing901022/p/3933417.html 通常,我们可以直接通过文件流来读取txt文件的内容,但有时可能会出现乱码!此时只要设置一下文 ...
- 使用反射实现 webdriver page 类
这个类的目的是为了简化page类的实例化,只需要定义public page成员变量 然后再 启动driver后 通过反射实例化page 后面可以直接点出page实例 package crazy.sel ...
- 在Ubuntu上安装Chrome浏览器和ChromeDriver
启动脚本后报错 selenium.common.exceptions.WebDriverException: Message: 'chromedriver' executable may have w ...
- 解锁CHM文件
刚在网上下载了CHM格式的文件,打开之后,右侧部分一片空白. 原因:可能是,系统针对来源不明文件的一种保存措施吧 解决方法: 1.选中文件,右键打开属性对话框,在 “常规”选项卡中 勾选 [解除锁定] ...
- HDU - 3488 Tour (KM最优匹配)
题意:对一个带权有向图,将所有点纳入一个或多个环中,且每个点只出现一次,求其所有环的路径之和最小值. 分析:每个点都只出现一次,那么换个思路想,每个点入度出度都为1.将一个点拆成两个点,一个作为入度点 ...
- Hadoop2.7.x中所有的DataNode都启动不了解决办法
参考:Hadoop集群所有的DataNode都启动不了解决办法说明现象:我自己出现这个问题的原因是:自己在namenode格式化之后创建了一些文件,然后重新执行了namenode格式化导致的. 现象就 ...
- Tomcat在windows服务器下,将tomcat控制台日志记录到日志文件中
Tomcat在windows服务器下,将tomcat控制台日志记录到日志文件中 在Linux系统中,Tomcat 启动后默认将很多信息都写入到 catalina.out 文件中,我们可以通过tail ...