<!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. codeforces 732

    A. Buy a Shovel time limit per test 1 second memory limit per test 256 megabytes input standard inpu ...

  2. java 28 - 5 JDK5的新特性 之 枚举的使用

    上一章,自定义了枚举类,超级麻烦.. 所以,JAVA给了一个枚举类:类 Enum<E extends Enum<E>> 注意事项 定义枚举类要用关键字enum 所有枚举类都是E ...

  3. webpack webpack-dev-server使用指南

    webpack-dev-server插件可以实现webpack的自动编译刷新 项目结构 pockage.js { "name": "webpack", &quo ...

  4. matlab FDR校正

    http://home.52brain.com/forum.php?mod=viewthread&tid=27066&page=1#pid170857 http://www.mathw ...

  5. 使用PHP获取根域名的方法！

    /** * 取得根域名 * @param type $domain 域名 * @return string 返回根域名 */ function GetUrlToDomain($domain) { $r ...

  6. wcf的诡异问题

    最近在做工作流设计器用的silverlight 使用wcf服务. 过程中遇到了两个奇怪的问题. 1. 出现整型参数无法传递到服务器的情况 2.出现反序列化失败的情况. 经过仔细排查发现 每个属性都有一 ...

  7. 转:openwrt中luci学习笔记

    原文地址:openwrt中luci学习笔记 最近在学习OpenWrt,需要在OpenWrt的WEB界面增加内容,本文将讲述修改OpenWrt的过程和其中遇到的问题. 一.WEB界面开发         ...

  8. getSelection、range 对象属性，方法理解，解释

    网上转了一圈发现没有selection方面的解释,自己捣鼓下 以这段文字为例子.. <p><b>法国国营铁路公司(SNCF)20日承认,</b>新订购的2000列火 ...

  9. Struts2 框架的快速搭建

    方便myEclipse 手动配置Struts2框架,写下此文,需要的朋友拿走不谢~ 一.引入JAR包 WEB工程->WebRoot->WEB-INF->lib引入Struts2对应版 ...

  10. 浅谈设计模式--建造器模式(Builder Pattern)

    建造器模式,是于创建带有大量参数的对象,并避免因参数数量多而产生的一些问题(如状态不一致-JavaBean的setter模式). 如果参数多且有些是必须初始化的,有些是不一定需要初始化的时候,创建对象 ...