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. MYsql 数据库密码忘记(Linux)

    在Linux 上面装上了 Mysql 数据库,但是发现密码忘了,悲催,解决方法跟Window系统下一样的, 不管是哪个操作系统处理的思路是相同的,就是首先要把mysql的权限去掉,这样即使忘了密码,不 ...

  2. WordPress一键部署网站

    每个人心里都有一个建站梦,所以今天作为我第一篇文章,就给大家圆了这场梦. 今天我来详细的一步一步带领大家利用WordPress程序来建立自己的小站以及解决直接域名访问(本地安装wordpress请阅读 ...

  3. HTML5窗口间同域和跨域的通信

    一丶同域下的 1.如果我们要操作iframe里面的元素,首先获取到引入的页面的window.获取iframe里面的window对象. var oIframe=getElementsByTagName( ...

  4. java.sql.SQLException: ORA-01000: 超出打开游标的最大数

    实际上,这个错误的原因,主要还是代码问题引起的.  ora-01000: maximum open cursors exceeded.  表示已经达到一个进程打开的最大游标数.  这样的错误很容易出现 ...

  5. ifconfig: command not found 如何解决?

    ifconfig: command not found 查看path配置(echo相当于c中的printf,C#中的Console.WriteLine) 1 echo $PATH 解决方案1:先看看是 ...

  6. C 标准库系列之ctype.h

    ctype.h 主要提供了一些函数用以测试字符或字符处理的功能函数:包括字符判断检测.字符转换: 目前ASCII字符可分为以下一些类型,如:大写.小写.字母.数字.十六进制.空白字符.可打印字符.控制 ...

  7. 第三十三篇:使用uiresImporter生成uires.idx及skin.xml

    在SOUI中,使用uires.idx这个文件来记录程序中使用的所有资源文件. 此外绘制对象(ISkinObj)则一般放在skin.xml中描述. 要向一个界面中增加一个新的图片,在没有uiresImp ...

  8. EF for MySql 开发配置手册

    执行MySQL安装程序,安装MySQL For Visual Studio和Connector/NET 执行命令: Install-Package EntityFramework Install-Pa ...

  9. ExecutorService中submit()和execute()的区别

    在使用java.util.concurrent下关于线程池一些类的时候,相信很多人和我一样,总是分不清submit()和execute()的区别,今天从源码方面分析总结一下. 通常,我们通过Execu ...

  10. 【iOS [[UIApplication sharedApplication] delegate]】运用

    之前想要拿到app的窗口,我们通常的写法是: [UIApplication sharedApplication].keyWindow 这种写法之前一直也觉得是正确的,没什么问题,而且网上大多数的博客或 ...