<!DOCTYPE html>

<html>

<head>

<title>HTML5上传图片预览</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script>

</head>

<body>

<h3>请选择图片文件</h3>

<form name="form0" id="form0">

<input type="file" name="file0" id="file0" multiple="multiple" /><br><img src="" id="img0">

</form>

<script>

$("#file0").change(function() {

var objUrl = getObjectURL(this.files[0]);

console.log("objUrl = " + objUrl);

if(objUrl) {

$("#img0").attr("src", objUrl);

}

});

//建立一個可存取到該file的url

function getObjectURL(file) {

var url = null;

if(window.createObjectURL != undefined) { // basic

url = window.createObjectURL(file);

} else if(window.URL != undefined) { // mozilla(firefox)

url = window.URL.createObjectURL(file);

} else if(window.webkitURL != undefined) { // webkit or chrome

url = window.webkitURL.createObjectURL(file);

}

return url;

}

</script>

</body>

</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. 在VMware上安装CentOS-6.5 minimal - 安装VMware Tools

    由于CentOS-6.5 minimal很多工具都默认没有安装,安装VMwareTools需要用到Perl,所以老伯建议先配置好网络再接着安装. 网络配置方法可以参考在VMware上安装CentOS- ...

  2. C#笔记---动态类(Dynamic)应用

    背景: 在Coding中有时候会遇到一些需要解析的数据,可是数据的字段数量和名称未统一,我们没法定义实体类来对应.那么我们就会想到通过C#的dynamic动态类来实现,如果大家注意的话一些ORM框架里 ...

  3. 使用Windows Azure的VM安装和配置CDH搭建Hadoop集群

    本文主要内容是使用Windows Azure的VIRTUAL MACHINES和NETWORKS服务安装CDH (Cloudera Distribution Including Apache Hado ...

  4. POJ3636Nested Dolls[DP LIS]

    Nested Dolls Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 8323   Accepted: 2262 Desc ...

  5. Unity Ragdoll(布娃娃系统)

    逼真的动作如何实现的? 在一些游戏中当NPC或玩家死亡的时候,死亡的肢体动作十分逼真,这一物理现象如何用Unity来实现呢?Unity物理引擎中的Ragdoll系统,可以用来创建这种效果,具体请参阅以 ...

  6. Mecanim分析

    前言 目前我还只是学习到Mecanima的初级阶段,看完了阿赵的日志<Unity3D 4.0新功能:Mecanim动画系统基础教程>,对Mecanima的了解更深入了一些,谢谢他的分享. ...

  7. Java写的斗地主游戏源码

    源码下载在最后 我们的前年的课设要求做一个斗地主程序,当时正在愁如何做界面,当时刚好在学习C#,于是就用C#完成了这个程序.一方面,当时我C#功底还很差(其实现在也不怎么样),很多地方用了“笨办法”, ...

  8. JSP中九大内置对象及其数据类型

    JSP中九大内置对象为: request              请求对象               类型 javax.servlet.ServletRequest         作用域 Req ...

  9. [No000001]一切都是最好的安排

    <一切都是最好的安排> 从前有一个国家,地不大,人不多,但是人民过着悠闲快乐的生活,因为他们有一位不喜欢做事的国王和一位不喜欢做官的宰相. 国王没有什么不良嗜好,除了打猎以外,最喜欢与宰相 ...

  10. angular留言板

    今天使用angularJs写了一个留言板,简单的享受了下angular处理数据的双向绑定的方便:注释已经都写到行间了 <!DOCTYPE html> <html lang=" ...