hTML5实现表单内的上传文件框，上传前预览图片，针刷新预览images，本例子主要是使用HTML5 的File API,建立一個可存取到该 file的url，一个空的img标签，ID为img0,把选择的文件显示在img标签中，实现图片预览功能。请选择支持HTML API的浏览器，比如 谷歌Chrome和火狐等。

<!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>请选择图片文件：JPG/GIF</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>

【转】HTML5 jQuery图片上传前预览的更多相关文章

  1. HTML5 jQuery图片上传前预览

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

  2. jquery图片上传前预览剪裁

    http://www.webmotionuk.co.uk/jquery/image_upload_crop.php http://keleyi.com/a/bjad/liuvpkke.htm 不错的d ...

  3. ASP.NET MVC图片上传前预览

    回老家过春节,大半个月,在家的日子里,吃好睡好,人也长了3.5Kg.没有电脑,没有网络,无需写代码,工作上相关的完全放下......开心与父母妻儿过个年,那样的生活令Insus.NET现在还在留恋.. ...

  4. input file实现多选，限制文件上传类型，图片上传前预览功能

    限制上传类型 & 多选:① accept 属性只能与 <input type="file" /> 配合使用.它规定能够通过文件上传进行提交的文件类型. ② mu ...

  5. html之file标签 --- 图片上传前预览 -- FileReader

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  6. file标签 - 图片上传前预览 - FileReader & 网络图片转base64和文件流

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  7. 【转】html之file标签 --- 图片上传前预览 -- FileReader

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  8. HTML5 FileReader实现图片上传前预览

    如果你的浏览器支持Html5的FileReader的话,实现图片上传前进行预览是一件非常容易之事情. 在控制器,创建一个视图Action: jQuery代码: 实时演示一下: 下面内容于2014-11 ...

  9. jquery 图片上传本地预览V1.2

    基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari 代码进行小小的压缩 如果看源码 自己解压就行了 版本已升级  修复jquery版本问题  支持任意jqu ...

随机推荐

  1. <随便写写>

    # Markdown用法 整理

  2. React Native的环境搭建以及开发的IDE

    (一)前言 前面的课程我们已经对React Native的环境搭建以及开发的IDE做了相关的讲解,今天我们的主要讲解的是应用设备运行(Running)以及调试方法(Debugging).本节的前提条件 ...

  3. win10下 homestead 安装

    1.安装VirtualBox 和 Vagrant 2.git或者composer安装 homestead git clone https://github.com/laravel/homestead. ...

  4. iOS开发 适配iOS10以及Xcode8

    iOS10的适配以及Xcode8使用上的一些注意点 一.证书管理 用Xcode8打开工程后,比较明显的就是下图了,这个是苹果的新特性,可以帮助我们自动管理证书.建议大家勾选这个Automaticall ...

  5. MySQL数据库之------DOS命令行的基本操作

    1.   进入D盘的如下路径: 按住   ctrl+shift  ,右键,选择在此处打开命令行窗口.出现图2.   图   1  图 2 2. .     3.   图 3  4.    图 4   ...

  6. 传统开发模型vs敏捷开发模型——过程模型的变革

    一.概念框架 在了解一个新概念的时候,最好的方法就是把它插入到原有的概念体系中.在不仅有助于对概念的记忆,更利于深刻地认识概念的本质.精髓.下图说明了"敏捷开发"在软件工程理论体系 ...

  7. 兼容ie7、8、9、10、FF、Chrome的遮罩显示

    经常碰到这种情形,要实现图片上有一层遮罩和按钮,鼠标滑过时遮罩颜色变深且按钮图片变化,磕磕碰碰终于弄出来题目所述兼容的解决方案. 对于遮罩的实现,将遮罩层.按钮.图片放置在同一个div中,根据abso ...

  8. 欢迎你，phpWeChat 开发者

    感谢您使用 phpWeChat 来作为自己网站或者微信公共号的开发工具.phpWeChat 是一款高效.稳定的网站+微信公共号内容管理系统(CMS),也可称之为一个PHP开发框架. phpWeChat ...

  9. LoadRunner之篇

    一.LoadRuuner 转载至:http://wenku.baidu.com/view/48c4c802e87101f69e319582.html

  10. Mac10.9用brew搭建Eclipse4.4+Maven3.2.3+JDK1.8运行环境

    --------------------------------------- 博文作者:迦壹 博客标题:Mac10.9用brew搭建Eclipse4.4+Maven3.2.3+JDK1.8运行环境 ...