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 文件类型, 默认 ...
随机推荐
- Win10 jdk的安装以及环境变量的配置,及需要注意的坑
此篇文章献给自己,希望下次长点记性 最近本人终于有时间开始学习appium,并且开始在电脑上配置环境,第一步就是在我那刚装的Win10 系统上安装jdk,过程并不顺利,由于之前都是用的win7,几乎都 ...
- 利用VMware克隆 windows 虚拟机需要注意的事项
利用VMware克隆windows虚拟机需要注意的事项--克隆虚拟机 --powershell 在域服务器使用,查看所有的sid dsquery computer|dsget computer -dn ...
- Hadoop十年解读与发展预测
编者按:Hadoop于2006年1月28日诞生,至今已有10年,它改变了企业对数据的存储.处理和分析的过程,加速了大数据的发展,形成了自己的极其火爆的技术生态圈,并受到非常广泛的应用.在2016年Ha ...
- c++ 11 bind function
Year 2011陈 良乔C++11 FAQ std::function 和 std::bind 标准库函数bind()和function()定义于头文件中(该头文件还包括许多其他函数对象),用于处理 ...
- Django_内置Admin
Django内置Admin Django内置的Admin是对于model中对应的数据表进行增删改查提供的组件,使用方式有: 依赖APP: django.contrib.auth django.co ...
- 微信小程序:其中wxml和wxss的样式说明
微信小程序:其中wxml和wxss的样式说明 一.简介 对于css不熟悉的Android程序员来说,开发微信小程序面临的一个比较困难的问题就是界面的排版了.微信小程序的排版就跟wxml和wxss有关了 ...
- Linux:查看磁盘空间占用情况
Linux:查看磁盘空间占用情况 工作中有时被分配的测试机空间不大,经常遇到磁盘空间占满的情况.排查过程如下: 一.首先使用df -h 命令查看磁盘剩余空间,通过以下图看出/目录下的磁盘空间已经被占满 ...
- Python3.x:实现多任务(多进程)
Python3.x:实现多任务(多进程) # python3 # author lizm # datetime 2018-02-13 16:00:00 # -*- coding: utf-8 -*- ...
- QMesageBox的使用
一.使用构造函数弹出对话框 1. QMessageBox msgBox://最简单的对话框,里面什么也没有 QString str = “test”: msgBox.setText(str); msg ...
- [nowcoder]最长区间
链接:https://www.nowcoder.com/acm/contest/158/B 求最长连续严格递增序列 线段树模板题,码力弱的一匹调了半天.. 代码: #include<iostre ...