jQuery+HTML5实现图片上传前预览效果

本文实例讲述了jQuery+HTML5实现图片上传前预览效果。分享给大家供大家参考。具体如下：

这里主要是使用HTML5 的File API,建立一個可存取到该file的url，一个空的img标签，ID为img0,把选择的文件显示在img标签中，实现图片预览功能。请选择支持HTML API的浏览器，比如谷歌Chrome和火狐等。

运行效果如下图所示：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-html5-pic-upload-pre-view-codes/

具体代码如下：

<!DOCTYPE html>
<html>
<head>
<title>HTML5上传图片预览</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="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>

希望本文所述对大家的jquery程序设计有所帮助。

赞 (0)

相关推荐

  • 上传图片预览JS脚本 Input file图片预览的实现示例

    在深圳做项目的时候,需要一个用户上传头像预览的功能!是在网上找了好多,都不太满意.要么是flash的,要么是Ajax上传后返回图片路径的,要么压根就是不能用的.幸运的是在这个项目以前有人写过一个图片预览的功能,还被我给翻了出来,在这里做个记录,方便自己以后用,也方便其他需要的朋友! 代码很简单,如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/

  • input file上传 图片预览功能实例代码

    input file上传图片预览其实很简单,只是没做过的感觉很神奇,今天我就扒下她神秘的面纱,其实原理真的很简单,下面通过一段代码大家都明白了. 具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="jquery.js"></script>

  • input type=file 选择图片并且实现预览效果的实例

    通过<input />标签,给它指定type类型为file,可提供文件上传: accept:可选择上传类型,如:只要传图片,且不限制图片格式,为image/*: multiple:规定是否可以选择多个文件: 规定只可上传图片,且可以选择多个文件 <input type="file" accept="image/*" multiple="multiple"/> 当然,直接一个input type=file 只能选择上传的文件

  • jQuery实现上传图片前预览效果功能

    jQuery实现上传图片前预览效果功能

    网上很多代码实现了上传图片这个功能,但不支持实时预览图片,下面实现了上传图片前预览效果功能,具体如下 效果如图: 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery上传图片之前可以预览效果</title> <script src="http://libs.baidu.com/jquery/1.11.3/jq

  • jQuery+HTML5实现图片上传前预览效果

    jQuery+HTML5实现图片上传前预览效果

    本文实例讲述了jQuery+HTML5实现图片上传前预览效果.分享给大家供大家参考.具体如下: 这里主要是使用HTML5 的File API,建立一個可存取到该file的url,一个空的img标签,ID为img0,把选择的文件显示在img标签中,实现图片预览功能.请选择支持HTML API的浏览器,比如谷歌Chrome和火狐等. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-html5-pic-upload-pre-view-c

  • ASP.NET MVC图片上传前预览简单实现

    ASP.NET MVC图片上传前预览简单实现

    本文实例为大家分享了图片上传前预览并获取图片文件名和图片字节大小的具体实现代码,供大家参考,具体内容如下 在控制器中创建一个Action: 在Views目录下对应的控制器名称下创建视图PreViewing: 上图中 标记1,引用jQuery类库. 标记2,选择文件. 标记3,预览图片. 标记4,显示图片文件名和图片字节大小. 标记5,是Javascript代码...... 本例预览: 以上就是本文的全部内容,希望对大家的学习有所帮助.

  • js HTML5多图片上传及预览实例解析（不含前端的文件分割）

    本文实例为大家分享了js HTML5多图片上传及预览实例,供大家参考,具体内容如下 主要运用  1.HTML5 files可以选择多文件,以及获取多文件信息  2.XMLHTTPRequest对象,发送HTTP传输请求  3.将每一个文件放在FormData,进行传输  4.利用readAsDataURL将图片内容直接变成url,放在img标签的src当中,生成可预览的图片 html+css+js代码 <!DOCTYPE html> <head> <meta http-equ

  • 原生js FileReader对象实现图片上传本地预览效果

    原生js FileReader对象实现图片上传本地预览效果

    本文实例为大家分享了js实现图片上传本地预览效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta

  • js图片上传前预览功能（兼容所有浏览器）

    网上找到的一份文件上传前预览的代码,转自JavaScript 图片的上传前预览(兼容所有浏览器) <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <style type="text/css"> #preview, .img, img { w

  • thinkphp jquery实现图片上传和预览效果

    thinkphp jquery实现图片上传和预览效果

    先上效果图: 那个file按钮样式先忽略 点击选择图片(浏览),随便选一张图片 js代码如下 //上传图片立即预览 function PreviewImage(imgFile) { var filextension = imgFile.value.substring(imgFile.value .lastIndexOf("."), imgFile.value.length); filextension = filextension.toLowerCase(); if ((filexte

  • 兼容IE和FF的图片上传前预览js代码

    兼容IE和FF的图片上传前预览js代码

    效果图如下:  代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <meta

  • Android图片上传实现预览效果

    Android图片上传实现预览效果

    首先具体分析一下,实现的功能,其中需求分析是必不可少的,需求.逻辑清除之后,再上手写代码,思路会很清晰. 1.多图上传首先得选择图片(这里项目需求是既可以拍照上传也可以从相册中选择) 2.拍照上传很简单了网上也有很多例子,调用照相机,返回uri,获取图片 3.从相册中选择图片  3.1 获取手机中的所有图片  3.2 将图片存到自定义图片数组中显示  3.3 自定义ViewPager浏览图片 主要的逻辑大体是这样,下面具体看一下实现: 一.首先看一下界面: <com.view.NoScrollG

  • Asp.net图片上传实现预览效果的简单代码

    在页面上放入一个上传控件和一个图片控件. 复制代码 代码如下: <asp:FileUpload ID="FileUpload1" runat="server" onpropertychange="show(this.value)"/>        <asp:Image ID="Image1" runat="server"  /> 在上传控件中写onpropertychange=&q

  • html5以及jQuery实现本地图片上传前的预览代码实例讲解

    html5以及jQuery实现本地图片上传前的预览代码实例讲解

    html5以及jQuery实现本地图片上传前的预览,效果类似如下: 选择图片前的页面: 选择图片之后的预览效果: 下面直接上代码(只是最简单的实现代码,css样式没有复制,自己随意发挥) <!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta http-equiv="Content-Type" content="text/html; char

随机推荐