JS图片上传预览
HTML部分:
<img id="avatar" class="editable img-responsive" alt="头像" src="/static/avatar/user.png" style="width: 100px;height: 100px;" />
<input id="image" name="image" type="file" style="display: none">
JS部分:
<script>
$('#avatar').click(function(){
$("#image").trigger('click');
});
$('#image').on('change',function(){
var imgdate = $(this).get(0);
var showing = document.getElementById('avatar');
if(imgdate.files && imgdate.files[0]){
showing.src = window.URL.createObjectURL(imgdate.files[0]);
}
});
</script>
JS图片上传预览的更多相关文章
- 兼容好的JS图片上传预览代码
转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...
- JS图片上传预览插件制作(兼容到IE6)
其实,图片预览功能非常地常见.很意外,之前遇到上传图片的时候都不需要预览,也一直没有去实现过.现在手上的项目又需要有图片预览功能,所以就动手做了一个小插件.在此分享一下思路. 一.实现图片预览的一些方 ...
- [前端 4] 使用Js实现图片上传预览
导读:今天做图片上传预览,刚开始的做法是,先将图片上传到Nginx,然后重新加载页面才能看到这个图片.在这个过程中,用户一直都看不到自己上传的文件是什么样子.Ps:我发现我真的有强迫症了,都告诉我说不 ...
- js实现图片上传预览及进度条
原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器<input type= ...
- js前端实现多图图片上传预览
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...
- js:s上次预览,上传图片预览,图片上传预览
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 移动端 js 实现图片上传 预览
方法一: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&q ...
- Jquery图片上传预览效果
uploadPreview.js jQuery.fn.extend({ uploadPreview: function (opts) { var _self = this, _this = $(thi ...
- HTML5 图片上传预览
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...
随机推荐
- ASP.NET中的chart控件绑定SQL Server数据库
网上很多的chart控件的实例都没有绑定数据库,经过一番摸索后,终于实现了chart控件绑定数据库. 首先,在Visual Studio中建立一个网站,新建一个WebForm项目,名称为ChartTe ...
- 一键启动NameNode和DataNode--shell脚本
使用shell脚本,一键启动hadoop中的NameNode和DataNode.分为普通版和装逼版.装逼版较普通版多了很多判断和信息提示,当然主要还是为了我联系shell脚本而写的. 如果想实现复用, ...
- 用极简方式实现新浪新版本特性展示效果--view的图片轮播
在发布版本的时候,大多数软件会在第一次使用新版本时候弹出视图用几张图片给用户做一个新版本特性介绍,最简单如下图新浪的版本特性介绍 由于图片是全屏展示且是左右滑动,大多数情况开发者会选择使用scroll ...
- pem转换成der
openssl x509 -in xxxxx.pem -inform PEM -out xxxx.der -outform DER [root@NB Desktop]# file xxxx.der
- jQuery中的Ajax - Codeigniter版本
发送(view中): $.ajax({ type : 'post', url : 'add', data : { 'nickname':nickname, 'mobile':mobile, 'sex' ...
- Android 笔记 a+b day6
独立写了自己第一个Android app -----------a+b!!!!! 自己手机Android版本4.2太低,安装时会出现解析失败,装到室友手机上就好了~~ happy~~ package ...
- `这个符号在mysql中的作用
` 是 MySQL 的转义符,避免和 mysql 的本身的关键字冲突,只要你不在列名.表名中使用 mysql 的保留字或中文,就不需要转义. 所有的数据库都有类似的设置,不过mysql用的是`而已.通 ...
- Centos7中安装Mysql及配置
CentOS 7 安装 MySQL 首先检查 MySQL 是否已安装 yum list installed | grep mysql 如果有的话 就全部卸载 yum -y remove +数据库名称 ...
- Daily Scrum Meeting ——FourthDay(Beta)12.12
一.Daily Scrum Meeting照片 讨论界面优化详情 二.Burndown Chart 项目有条不紊地进行中... 1.新增6个界面修改计划 2.修复两个BUG 三.项目进展(check- ...
- java.lang.OutOfMemoryError: PermGen space错误解决方法
1. MyEclipse 中报 PermGen space window--> preferences-->Myclipse-->Servers-->Tomcat- ...