<!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. git 添加远程仓库遇到的问题

    上午在学习廖雪峰老师的 git 教程(http://www.liaoxuefeng.com/),在添加远程仓库这一节中遇到了两个问题: 问题描述: 一.关联自己的远程仓库. fatal: Not a ...

  2. sobel算子原理及opencv源码实现

    sobel算子原理及opencv源码实现 简要描述 sobel算子主要用于获得数字图像的一阶梯度,常见的应用和物理意义是边缘检测. 原理 算子使用两个33的矩阵(图1)算子使用两个33的矩阵(图1)去 ...

  3. 前端这条路怎么走，作为一名后端er，说说我的见解

    近期都游荡在各大群里看大家的讨论,经常看到关于程序员生涯的一些讨论,颇有感触,最近的国庆的确过得有些堕落,都没怎么更新,仔细相信还是应该分享点经验给大家的!想必大家都经历过面试,这是进入一家公司的必要 ...

  4. Codeforces 549C. The Game Of Parity[博弈论]

    C. The Game Of Parity time limit per test 1 second memory limit per test 256 megabytes input standar ...

  5. Android驱动入门-Led控制+app+ndk库+底层驱动

    硬件平台: FriendlyARM Tiny4412 Cortex-A9 操作系统: UBUNTU 14.04 LTS 时间:2016-09-20  21:56:48 本次实验使用的是 安卓APP + ...

  6. J2EE中关于tomcat的maxIdle、maxActive、maxActive相关配置

    一.基本概念 1 maxActive 连接池的最大数据库连接数.设为0表示无限制,一般把maxActive设置成可能的并发量就行了 2 maxIdle 最大的空闲连接数 3 maxWait 最大建立连 ...

  7. [No000009]学习重要还是经营人脉重要？

    大说数人的朋友圈都是这样的:雪中送炭的寥寥无几,锦上添花的大多数人连你自己都不认识,碰到倒霉的时候还能遇到落进下石的.人脉是很重要,可相对自身的学习来说,就没有想象中那么重要了. 有一次在北大讲座,遇 ...

  8. 转: Eclipse 分屏显示同一个文件

    Eclipse 分屏显示同一个文件   场景 : 某个类很大,可能有数千行.当你想要将类开头部分与中间或者靠后的部分进行对比时,请follow如下步骤: Window -> Editor -&g ...

  9. JS中new都是干了些什么事情

    var Person = function(name){ this.name = name; this.say = function(){ return "I am " + thi ...

  10. IOS之推送通知(本地推送和远程推送)

    推送通知和NSNotification是有区别的: NSNotification:是看不到的 推送通知:是可以看到的 IOS中提供了两种推送通知 本地推送通知:(Local Notification) ...