<!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. TCP三次握手，数据传输，四次挥手

    TCP包结构 一个TCP包结构如下: 一个TCP包主要由TCP包头和数据部分组成,包头固定部分为20字节,选项和数据部分根据实际情况设置为4N(N可以为0)字节. 1.16bit源端口和目的端口号,它 ...

  2. js获得昨天前天明天时间以及setDate()

    <script type="text/javascript"> function GetDateStr(AddDayCount) { var dd = new Date ...

  3. css3中变形与动画（二）

    css3制作动画的几个属性:变形(transform),过渡(transition)和动画(animation). transform介绍过了.接下来介绍过渡transition. 一.例子 先通过一 ...

  4. Object-C中self和super的区别

    self与super的区别 原文CSDN evilotus 有所整理 **** 在ObjC中的类实现中经常看到这两个关键字"self"和"super",以以前o ...

  5. Diffuse_Shader笔记1.shader和编辑器的交互

    1.写在前面的心情 o(︶︿︶)o   坚持不下来就是失败:每次看到candycat博客都会一阵阵冷汗很愧疚... shader .图形还是要学:不仅是兴趣,以后一定有用.现在做游戏UI开发,工作上还 ...

  6. guava 学习笔记 使用瓜娃（guava）的选择和预判断使代码变得简洁

    guava 学习笔记 使用瓜娃(guava)的选择和预判断使代码变得简洁 1,本文翻译自 http://eclipsesource.com/blogs/2012/06/06/cleaner-code- ...

  7. stl学习（二）集合 set 的使用

    set集合容器底层由红黑树实现,是平衡二叉搜索树. 相对stl中的list.deque效率更高. 注意:由于集合 的 性质,单纯的 set 不允许重复的元素 初始化 / 清空 函数 : clear() ...

  8. 1，字符是否为空，2，比较两个字符大小。String.Compare(String, String)。string.IsNullOrEmpty（string）

    1, String.Compare 方法 (String, String) 比较两个指定的 String 对象. 值 条件 小于零 strA 小于 strB. 零 strA 等于 strB. 大于零 ...

  9. delphi附带通用控件安装方法：

    附带通用控件安装方法:----------基本安装1.对于单个控件,Componet-->install component..-->PAS或DCU文件-->install;2.对于 ...

  10. js读取解析JSON类型数据（转）

    谢谢博主,转自http://blog.csdn.net/beyond0851/article/details/9285771 一.什么是JSON? JSON(JavaScript Object Not ...