1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>HTML5上传图片预览</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6. <script src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script>
  7. </head>
  8. <body>
  9. <h3>请选择图片文件</h3>
  10. <form name="form0" id="form0">
  11. <input type="file" name="file0" id="file0" multiple="multiple" /><br><img src="" id="img0">
  12. </form>
  13. <script>
  14. $("#file0").change(function() {
  15. var objUrl = getObjectURL(this.files[0]);
  16. console.log("objUrl = " + objUrl);
  17. if(objUrl) {
  18. $("#img0").attr("src", objUrl);
  19. }
  20. });
  21. //建立一個可存取到該file的url
  22. function getObjectURL(file) {
  23. var url = null;
  24. if(window.createObjectURL != undefined) { // basic
  25. url = window.createObjectURL(file);
  26. } else if(window.URL != undefined) { // mozilla(firefox)
  27. url = window.URL.createObjectURL(file);
  28. } else if(window.webkitURL != undefined) { // webkit or chrome
  29. url = window.webkitURL.createObjectURL(file);
  30. }
  31. return url;
  32. }
  33. </script>
  34. </body>
  35. </html>

基于jquery实现的上传图片及图片预览效果代码的更多相关文章

  1. jquery实现上传图片及图片大小验证、图片预览效果代码

    jquery实现上传图片及图片大小验证.图片预览效果代码 jquery实现上传图片及图片大小验证.图片预览效果代码 上传图片验证 */ function submit_upload_picture() ...

  2. jquery实现简单鼠标经过图片预览效果

    html结构:<div class="prebtn"><img src=""/></div> css代码:#preview{ ...

  3. 实现QQ空间图片预览效果

    今天项目遇到需求 要求 实现图片预览效果 .  类似于扣扣空间那种,本人也到网上找过 代码量太大了   ,类多到处是注释看的有点恶心 .然后自己写了一个图片预览的效果,其实很简单的 . 首先我们来分析 ...

  4. Android 手势检测实战 打造支持缩放平移的图片预览效果（下）

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/39480503,本文出自:[张鸿洋的博客] 上一篇已经带大家实现了自由的放大缩小图 ...

  5. 兼容最新firefox、chrome和IE的javascript图片预览实现代码

    这篇文章主要介绍了兼容最新firefox.chrome和IE的javascript图片预览实现代码,测试了浏览器firefox6.firefox12.chrome 25.0.1364.172 m.IE ...

  6. （干货）微信小程序之上传图片和图片预览

    这几天一直负责做微信小程序这一块,也可以说是边做边学习吧,把自己做的微信小程序的一些功能分享出来,与大家探讨一下,相互学习相互进步. 先看下效果图 只写了一下效果样式的话希望大家不要太在意,下面马路杀 ...

  7. 微信小程序之上传图片和图片预览

    这几天一直负责做微信小程序这一块,也可以说是边做边学习吧,把自己做的微信小程序的一些功能分享出来,与大家探讨一下,相互学习相互进步. 先看下效果图 只写了一下效果样式的话希望大家不要太在意,下面马路杀 ...

  8. javascript和HTML5上传图片之前实现预览效果

    一:FileList对象与file对象 FileList对象表示用户选择的文件列表,在HTML4中,file控件内只允许放置一个文件,但是到了HTML5中,通过添加multiple属性,file控件内 ...

  9. 基于jquery带时间轴的图片轮播切换代码

    基于jquery图片标题随小圆点放大切换.这是是一款带时间轴的图片轮播切换代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="decoroll2 ...

随机推荐

  1. AngularJS基础概念

    作用域.控制器.指令 作用域 应用的作用域是和应用的数据模型相关联的,同时作用域也是表达式执行的上下文.$scope对象是定义应用业务逻辑.控制器方法和视图属性的地方. 作用域是应用状态的基础.基于动 ...

  2. COM中的线程模式

      Choosing the threading model for an object depends on the object's function. An object that does e ...

  3. 关于TP3.2微信开发那点事（基础篇）

    许久没有为博客更新内容,今天我将过去一周做的微信服务号的相关心得体会在此分享,具体如何申请成为服务号的相关流程文档都有,可根据要求完成: 开发第一步:开发前配置: AppID-->微信号的&qu ...

  4. 第8章 用户模式下的线程同步（2）_临界区（CRITICAL_SECTION）

    8.4 关键段(临界区)——内部也是使用Interlocked函数来实现的! 8.4.1 关键段的细节 (1)CRITICAL_SECTION的使用方法 ①CRITICAL_SECTION cs;   ...

  5. C#添加测量运行时间

    使用范围 使用模块化开发,每个模块都有初始化功能,初始化功能可能包括:加载配置表,初始化事件,初始化设置 那么如果想测量每个模块的Init时间呢?Net框架已经提供了测量运行的方法 System.Di ...

  6. Linux系统资源使用情况

    概述: 用 'top -i' 看看有多少进程处于 Running 状态,可能系统存在内存或 I/O 瓶颈,用 free 看看系统内存使用情况,swap 是否被占用很多,用 iostat 看看 I/O ...

  7. [No000046]为什么跳槽加薪会比内部调薪要高？

    有网友在知乎提问: 最近在思考一个问题,为什么跳槽往往意味着加薪? 如果一个人确有价值,为什么在原来的公司没有在薪水上体现出来?如果没有价值,为什么跳槽以后就会加薪?还是可以单纯的解释为,应聘者和招聘 ...

  8. jmeter-HTTP COOKIE Manager

    http://wangsheng14591.blog.163.com/blog/static/327797102012829101351887/

  9. AFNetworking 基本使用

    AFNetwork是一个轻量级的网络请求api类库.是以NSURLConnection, NSOperation和其他方法为基础的. 下面这个例子是用来处理json请求的 3如何选择AFNetwork ...

  10. openwrt编译出错处理记录

    1.代码从windows复制过来编译报错处理,参考:http://www.360doc.com/content/13/1016/21/3884271_321966616.shtml 2.编译lua-s ...