<!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. LNMP环境搭建

    LNMP环境搭建 Linux + Nginx + MySQL + PHP PHP是一种脚本语言,当前中国乃至世界上使用PHP语言开发的网站非常普遍 Nginx是一个web服务软件,和apache是一类 ...

  2. arm汇编进入C函数分析,C函数压栈，出栈，传参，返回值

    环境及代码介绍 环境和源码 由于有时候要透彻的理解C里面的一些细节问题,所有有必要看看汇编,首先这一切的开始就是从汇编代码进入C的main函数过程.这里不使用编译器自动生成的这部分汇编代码,因为编译器 ...

  3. Hadoop多硬盘配置时的注意事项

    <!-- hdfs-site.xml --> <property> <name>dfs.datanode.fsdataset.volume.choosing.pol ...

  4. js生成[n,m]的随机数

    一.预备知识 Math.ceil();  //向上取整. Math.floor();  //向下取整. Math.round();  //四舍五入. Math.random();  //0.0 ~ 1 ...

  5. django csrf 处理简介

    CSRF 是什么 CSRF 即跨站请求伪造,在用户不知情的情况下向有漏洞的网站发送请求.例如有正常网站A,恶意网站B, 用户若对A B 两个网站都有访问,B 可能伪造请求到 A,比如提交表单.至于具体 ...

  6. jmeter的压力测试

    Apache JMeter是Apache组织开发的基于Java的压力测试工具.用于对软件做压力测试. 以下为压力测试的简单介绍 1.在测试计划下增加一个线程组 2.线程组的内容需要进行编辑,根据压力测 ...

  7. Flex布局教程及属性速查

    一.Flex布局介绍 伸缩盒模型(flexbox)是一个新的盒子模型,意为"弹性布局",用来为盒状模型提供最大的灵活性,主要优化了UI布局.Flexbox的功能主要包手:简单使用一 ...

  8. 嵌入式Linux驱动学习之路(六)u-boot启动内核

    内核启动是需要必要的启动参数.不能开机自动完全从0开始启动,需要uboot帮助内核实现重定位并提供参数. 首先,uboo会从Kernel分区中读取bootcmd环境变量,根据环境变量可自动启动. 分区 ...

  9. [No00004A]为什么你看了很多书，却依然没有洞见

    摘要: 前几天有人在知乎上问:今天就回答下很多人问了很久的这个问题,并且解释一下如何构建系统化的知识体系.我想很多人看到这个问题,期待的答案是一个书单,可是我要告诉你这并没有什么卵用.我想大部分人都经 ...

  10. http协议（九）响应首部字段

    响应首部字段: 服务器向客户端返回响应报文中所使用的字段,用于补充的附加信息.服务器信息.以及对客户端的附加要求等 1.Accept-Ranges 告知客户端服务器能否处理范围请求,以指定获取服务器的 ...