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& ...
随机推荐
- Java数据类型和MySql数据类型对应表
- express中的路由
一.读取静态文件 基本代码: "use strict"; const express = require("express"); let app = expre ...
- 如何设置Vimrc
.title { text-align: center } .todo { font-family: monospace; color: red } .done { color: green } .t ...
- Duilib源码分析(四)绘制管理器—CPaintManagerUI—(前期准备一)
上节中提到在遍历创建控件树后,执行了以下操作: 1. CDialogBuilder构建各控件对象并形成控件树,并返回第一个控件对象pRoot: 2. m_pm.AttachDialo ...
- ActiveMQ
前言 MQ--Message Queue,中文翻译为"消息队列",维基百科上的这样描述: 消息队列(英语:Message queue)是一种进程间通信或同一进程的不同线程间的通信方 ...
- 安装HBase
安装HBase 1.默认已经安装好java+hadoop+zookeeper 2.下载对应版本的HBase 3.解压安装包 tar zxvf hbase-1.0.2-bin.tar.gz 4.配置环境 ...
- 1.Linux常用命令
命令名称:ls 格式: ls [-选项] [参数] 注:中括号表示可选 命令路径:/bin/ls 功能描述:显示信息 例如: 选项 -a 显示所有的文件,包括隐藏文件,(以 . 开头的文件) -l ...
- JVM内存管理&GC
一.JVM内存划分 |--------------------|-------------PC寄存器-------| |----方法区 ---------|--------------java 虚拟机 ...
- java方法重载(overload)、重写(override);this、super关键简介
一.方法重载: 条件:必须在一个类中,方法名称相同,参数列表不同(包括:数据类型.顺序.个数),典型案例构 造方重载. 注意:与返回值无关 二.方法重写: 条件: (1)继承某个类或实现某接口 (2 ...
- Chrome 开发者工具(DevTools)中所有快捷方式列表
Chrome DevTools提供了一些内置的快捷键,开发者利用这些快捷键可以节省常工作中很多日的开发时间.下面列出了每个快捷键在Windows/Linux及Mac中的对应键.其中一些快捷键对于Dev ...