<!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. 使用VelocityTracker来完成MotionEvent移动速率计算

    先看效果图 关键代码(此处记录单点): switch (event.getAction()){ case MotionEvent.ACTION_DOWN: if (veloctiy==null) { ...

  2. java学习指南

    @Override public BaseResponse selectListPage(PageData page, Object obj) { BaseResponse response = ne ...

  3. bzoj 3262 陌上花开

    本质是一个三维偏序,一位排序后cdq分治,一维在子函数里排序,一维用树状数组维护. 把三维相等的合并到一个里面. #include<iostream> #include<cstdio ...

  4. BZOJ 3224: Tyvj 1728 普通平衡树

    3224: Tyvj 1728 普通平衡树 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 9629  Solved: 4091[Submit][Sta ...

  5. 工作中的一些JS--为网页动态添加元素，类似于邮箱添加联系人的功能

    项目中要解决一个为下拉框动态添加选项的问题,之前从网上搜到结果,写个JS函数 //先新建元素,并添加属性 var option = document.createElement("optio ...

  6. 线程GCD

    #import "ViewController.h" @interfaceViewController () @end @implementation ViewController ...

  7. CSS3中的动画功能（二）

    上一篇文章讲解了css3动画中的一个即transitions,那么今天来说说另外一个animations.和transitions不同的是animations可以定义多个关键帧以及每个关键帧中元素的属 ...

  8. PHP常用代码汇总

    Get与Post //POST if(isset( $_POST['add_gift'] )) { $game=trim( $_POST['game'] ); } //GET if(isset( $_ ...

  9. GIFT-EMS礼记----青软S2SH(笔记)

    这个S2SH的项目,是这本书的一个贯穿项目,所以这里要记录一下, 看这个项目有两个目的: 1.借助这个项目,学习一下S2SH的综合配置及使用 2.借助这个项目练习一下如何做需求分析和项目架构设计. P ...

  10. MEF 根据配置注入Service

    有这样的场景 : 现在一个接口有很多种实现类,需要根据配置,来确定确定调用哪个具体的实现类.这样使得软件扩展性大大提高 在MEF可以通过ExportMetadata 来实现这样的效果. 1.现在我们建 ...