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图片上传预览的更多相关文章

  1. 兼容好的JS图片上传预览代码

    转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...

  2. JS图片上传预览插件制作(兼容到IE6)

    其实,图片预览功能非常地常见.很意外,之前遇到上传图片的时候都不需要预览,也一直没有去实现过.现在手上的项目又需要有图片预览功能,所以就动手做了一个小插件.在此分享一下思路. 一.实现图片预览的一些方 ...

  3. [前端 4] 使用Js实现图片上传预览

    导读:今天做图片上传预览,刚开始的做法是,先将图片上传到Nginx,然后重新加载页面才能看到这个图片.在这个过程中,用户一直都看不到自己上传的文件是什么样子.Ps:我发现我真的有强迫症了,都告诉我说不 ...

  4. js实现图片上传预览及进度条

    原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器<input type= ...

  5. js前端实现多图图片上传预览

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

  6. js:s上次预览,上传图片预览,图片上传预览

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 移动端 js 实现图片上传 预览

    方法一: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&q ...

  8. Jquery图片上传预览效果

    uploadPreview.js jQuery.fn.extend({ uploadPreview: function (opts) { var _self = this, _this = $(thi ...

  9. HTML5 图片上传预览

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...

随机推荐

  1. CentOS7 cacti 安装

    首先centos7 web环境的安装这里就不说了.安装cacti,首先得web环境配置好 其次添加两个用户,一个是cacti用于操作mysql的 cactimysql  一个是cacti操作Linux ...

  2. Sqlserver 2008清除数据库日志

    USE [master] GO ALTER DATABASE DBNAME SET RECOVERY SIMPLE WITH NO_WAIT GO ALTER DATABASE DBNAME SET ...

  3. 60阶单群同构于A5的证明

    设$G$是$60$阶的单群,我们来证明他同构于$A_5$,一个比较直观地思路是考虑群表示$\phi:G\to S(\Sigma)$,由同态基本定理得到$$G/{\rm Ker}\phi \simeq ...

  4. 一个 Q-learning 算法的简明教程

    本文是对 http://mnemstudio.org/path-finding-q-learning-tutorial.htm 的翻译,共分两部分,第一部分为中文翻译,第二部分为英文原文.翻译时为方便 ...

  5. 配置比对脚本(python)

    # -*- coding: utf- -*- from datetime import * import MySQLdb import sys import time import datetime ...

  6. UWP学习记录3-设计和UI之样式

    UWP学习记录3-设计和UI之样式 1.颜色 在系统的“设置”>“个性化”>“颜色”里,提供了主题色选择.选定主题色后,会根据颜色亮度的 HSB 值创建浅色和深色的主题色. 应用可使用阴影 ...

  7. 获取系统中所有进程&线程信息

    读书笔记--[计算机病毒解密与对抗] 目录: 遍历进程&线程程序 终止进程 获取进程信息 获取进程内模块信息 获取进程命令行参数 代码运行环境:Win7 x64 VS2012 Update3 ...

  8. Beginning Scala study note(5) Pattern Matching

    The basic functional cornerstones of Scala: immutable data types, passing of functions as parameters ...

  9. [NHibernate]查看NHibernate生成的SQL语句

    最近接触到一个用Spring.Net结合NHIbernate的项目,第一次使用,有很多配置,数据操作一旦出问题,很难找到原因,那么如何查看NHibernate发送给数据库的SQL语句呢? 当然我们可以 ...

  10. LeetCode 104. Maximum Depth of Binary Tree

    Problem: Given a binary tree, find its maximum depth. The maximum depth is the number of nodes along ...