<!DOCTYPE html>

<html>

<head>

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

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

<script src="jquery-1.11.2.min.js"></script>

</head>

<body>

<h3>请选择图片文件：JPG/GIF</h3>

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

<input type="file" name="file0" id="file0" multiple /><br><img src="yhmgc/img/2.jpg" width="100" height="100" 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+HTML5实现上传文件预览的更多相关文章

  1. ThinkPHP5与JQuery实现图片上传和预览效果

    内容正文 这篇文章主要为大家详细介绍了thinkphp上传图片功能,和jquery预览图片效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 先上效果图: html和js代码如下: <!DO ...

  2. 基于jquery实现图片上传本地预览功能

    一.原理 分为两步: 当上传图片的input被触发并选择本地图片之后获取要上传的图片这个对象的URL(对象URL),把对象URL赋值给事先写好的img标签的src属性即可把图片显示出来.在这里,我们需 ...

  3. HTML5图片上传本地预览

    在开发 H5 应用的时候碰到一个问题,应用只需要一张小的缩略图,而用户用手机上传的确是一张大图,手机摄像机拍的图片好几 M,这可要浪费很多流量. 我们可以通过以下方式来解决. 获取图片 通过 File ...

  4. js 上传文件预览

    1. FILE API html5提供了FIle和FileReader两个方法,可以读取文件信息并读取文件. 2. example <html> <body> <div ...

  5. servlet实现文件上传，预览，下载和删除

      一.准备工作 1.1 文件上传插件:uploadify: 1.2 文件上传所需jar包:commons-fileupload-1.3.1.jar和commons-io-2.2.jar 1.3 将数 ...

  6. 【转】HTML5 jQuery图片上传前预览

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该 file的url,一个空的img标签,ID为img0,把选 ...

  7. HTML5 jQuery图片上传前预览

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该file的url,一个空的img标签,ID为img0,把选择 ...

  8. HTML5 jQuery+FormData 异步上传文件，带进度条

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link href ...

  9. hTML5实现表单内的上传文件框，上传前预览图片，针刷新预览images

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images, 本例子主要是使用HTML5 的File API,建立一個可存取到该file的url, 一个空的img标签,ID为img0,把 ...

随机推荐

  1. 线段树 poj 1436

    题目大意:给出n条垂直于x轴的线段的数据y1,y2,x,求出有几个三条线段一组的三元组并且他们兩兩能相见的.思路:对y轴建树,将x排序,然后按顺序边询问边擦入,用mark[i][j]表示j往左可以看到 ...

  2. Vue之计算属性

    上一篇里演示了计算属性的优点,但是,computed和data里的属性还是有区别的,computed的一个弱点就在于依赖于data属性的更新,才能触发视图更新. 举个例子: 上个例子中谈到用v-for ...

  3. hdu2586 LCA

    How far away ? Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) T ...

  4. ORB-SLAM（二）性能

    ORB-SLAM程序提供了运行Monocular.Stereo和RGBD数据的程序.编译成功后,可以通过运行TUM的标准数据来验证程序是否成功.如果想自己测试一些数据,可以通过OpenCV提供的接口调 ...

  5. Python删除指定时间的文件

    import os import time import sys from xml.dom import minidom, Node from xml.dom.minidom import parse ...

  6. Java语法

    java语法: 一个java程序可以说是一系列对象的集合,而这些对象都要通过调用彼此的方法来协同工作. 对象: 对象是一个实例,例如:一只猫,它是一个对象,有状态和行为.它的状态状态有:颜色,名字,品 ...

  7. iOS特殊字符处理

    你提供的 URL 字符串 里面可能包含某些字符,比如‘$‘ ‘&’ ‘?’...等,这些字符在 URL 语法中是具有特殊语法含义的, 比如 URL :http://www.baidu.com/ ...

  8. bzoj 4318 OSU!

    期望dp. 考虑问题的简化版:一个数列有n个数,每位有pi的概率为1,否则为0.求以每一位结尾的全为1的后缀长度的期望. 递推就好了. l1[i]=(l1[i-1]+1)*p[i]+0*(1-p[i] ...

  9. RabbitMQ consumer的一些坑

    坑 坑就像是恶梦,总是在最不设防的时候出现,打的你满地找牙.这里记录一些坑,遇到的朋友可以及时的跳出,避免带来损失. 使用事件方式去获取queue中的消息,然后再进行处理.这看起来没什么问题,但是如果 ...

  10. 常用的网络命令--之...... Ipconfig详解

    ipconfig是运行微软的Windows9x/NT/2000/XP/Vista操作系统的电脑上用来控制网络连接的一个命令行工具.它的主要功用,包括用来显示现时网络连接的设置(/all参数),或通过/ ...