<!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. [Bundling and Minification ] 三、缩小

    Minification 缩小,将文档的Size减小.主要是通过一下方式缩小文档的Size: 1.移除没用的空行 . 2.删除代码注释. 3.缩短js变量的名称,将变量名用一个字母表示.

  2. 顺序表java实现

    public class SeqList { Object[] data; int maxSize; int length; public SeqList(int maxSize) { this.ma ...

  3. Neural Style学习3——操作

    Basic usage: th neural_style.lua -style_image <image.jpg> -content_image <image.jpg> Ope ...

  4. extracting fasta records from a multi-fasta file based on a list using awk

    for i in $(cat gene_list) do awk -v RS=">" '($1==a){print ">"$0}' a=$i inp ...

  5. inference和learning

    一开始对于机器学习,主要是有监督学习,我的看法是: 假定一个算法模型,然后它有一些超参数,通过喂多组数据,每次喂数据后计算一下这些超参数.最后,数据喂完了,参数取值也就得到了.这组参数取值+这个算法, ...

  6. 关于背景图相对父容器垂直居中问题 —— vertical-align 和 line-height 之间的区别

       html css <div class="register-wrapper"> <div class="register"> &l ...

  7. StringBuffer类的功能

    StringBuffer类 1.添加功能 public StringBuffer append(String str):可以把任意类型数据添加到缓冲区,并返回缓冲区域 public StringBuf ...

  8. centos ab命令安装

    yum install apr-util -ymkdir abcd abyum -y install yum-utils -yyumdownloader httpd yum localinstall ...

  9. Q: ossfs挂载时如何设置权限？

    Q: ossfs挂载时如何设置权限? 如果要允许其他用户访问挂载文件夹,可以在运行ossfs的时候指定allow_other参数: ossfs your_bucket your_mount_point ...

  10. struts文件上传，获取文件名和文件类型

    struts文件上传,获取文件名和文件类型   Action中还有两个属 性:uploadFileName和uploadContentType,这两个属性分别用于封装上传文件的文件名.文件类型.这是S ...