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. JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度

    网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...

  2. js 函数

    函数:封装了某一块功能 四要素: 1.返回类型 2.函数名 3.参数列表4.函数体强类型语言 返回类型 函数名 首字母大写 参数列表string(字符串) Show (int a){ 函数体 }弱类型 ...

  3. 扩展方法 1 简单的string扩展方法

    这里是关于 String的简单扩展方法 (静态类 静态方法 this 类型 这里是string) static class Program { static void Main(string[] ar ...

  4. CNN初步-2

    Pooling 为了解决convolved之后输出维度太大的问题 在convolved的特征基础上采用的不是相交的区域处理     http://www.wildml.com/2015/11/unde ...

  5. vnc远程运行3D游戏

    使用的版本:VNC-5.2.3-Windows.exe   vnc官网 安装的过程中需要输入license key,以下给出一些enterprise license(最大权限的License): K5 ...

  6. CSS系列:在HTML中引入CSS的方法

    HTML与CSS是两个作用不同的语言,它们同时对一个网页产生作用,因此必须将CSS与HTML链接在一起使用.在HTML中,引入CSS的方法主要有4种:行内式.内嵌式.导入式和链接式. 1. 行内式 行 ...

  7. vaadin学习,重要的网址

    比较重要的几个:UI组件及示例程序:http://demo.vaadin.com/samplerBook of Vaadin:https://vaadin.com/bookAPI:https://va ...

  8. 学习微信小程序之css3display

    一display diaplay改变标签的模式,行内装块级(block),块级转行内(inline) 通过设置display为none,可以 让整个标签在页内移除掉 设置visibility为hidd ...

  9. font-family字体总结

    宋体 SimSun黑体 SimHei微软雅黑 Microsoft YaHei微软正黑体 Microsoft JhengHei新宋体 NSimSun新细明体 PMingLiU细明体 MingLiU标楷体 ...

  10. 注解 @RequestParam,@RequestHeader,@CookieValue,Pojo,servlet原生API

    1.@RequestParam 我们的超链接:<a href="springMvc/testRequestParam">testRequestParam</a&g ...