JS+HTML5实现图片在线预览功能

本文实例为大家分享了HTML5图片在线预览的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html>
<head>
  <title>HTML5图片预览</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <script src="http://img9.tongzhuo100.com/js/jquery-1.7.2.min.js"></script>
  <style>
    .hide
    {
      display:none;
    }
  </style>
</head>
<body>
<h3>请选择一张JPG/GIF的图片</h3>
<form name="form0" id="form0" >
  <input type="file" name="file0" id="file0" multiple="multiple" />
  <br><br><img src="" id="img0" width="120" class="hide">
</form>
<script>
  $("#file0").change(function(){
    var objUrl = getObjectURL(this.files[0]) ;
    console.log("objUrl = "+objUrl) ;
    if (objUrl)
    {
      $("#img0").attr("src", objUrl);
      $("#img0").removeClass("hide");
    }
  }) ;
  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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 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+HTML5 FileReader实现文件上传前本地预览功能

    HTML5之FileReader的使用 HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型. FileReader的使用方式非常简单,可以按照如下步骤创建FileReader对象并调用其方法: 1.检测浏览器对FileReader的支持 if(window.FileReader) { var fr = new FileReader(); // add your code here } e

  • JS+HTML5实现上传图片预览效果完整实例【测试可用】

    本文实例讲述了JS+HTML5实现上传图片预览效果.分享给大家供大家参考,具体如下: 在项目中遇到用input标签file类型的文件上传,想实在上传之前进行图片的预览功能:之前的做的一个解决方案是文件先上传上去然后返回地址再显示在页面上,这样就不太好,因为用户基本信息可能并没有保存,但是头像却已经改变,如果在需要改变就导致了多余图片的保存服务器. 在网上找了下解决方案,如下所示: <!DOCTYPE HTML> <html> <head> <meta charse

  • JS HTML5拖拽上传图片预览

    JS HTML5拖拽上传图片预览

    1.文件API:(File API) file类型的的表单控件选择的每一个文件都是一个file对象,而FileList对象则是这些file对象的集合列表,代表所选择的所有文件.file对象继承于Blob对象,该对象表示二进制原始数据,提供slice方法,可以访问到字节内部的原始数据块.总之,file对象包含与FlieList对象,而file对象继承于Blob对象! 各对象的相关属性关系: FileReader接口: 由图可知:HTML5还提供了FileReader接口:用于将文件读入内存,并读取

  • JS+HTML5实现图片在线预览功能

    本文实例为大家分享了HTML5图片在线预览的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <title>HTML5图片预览</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="http://img9.ton

  • JS实现的input选择图片本地预览功能示例

    JS实现的input选择图片本地预览功能示例

    本文实例讲述了JS实现的input选择图片本地预览功能.分享给大家供大家参考,具体如下: 预览效果见下图: HTML代码如下: <div class="content" style="margin-top:100px;height:200px;"> <div id="div4bm" style="float:left;"> <!--input[button] 触发 file click事件--&g

  • SpringBoot实现文件在线预览功能的全过程

    SpringBoot实现文件在线预览功能的全过程

    目录 背景 系统设计 文件类型及方案 流程设计 系统实现 识别文件后缀 文件解析 系统效果 使用方法 项目源码地址 预览界面 总结 背景 最近公司内部oa系统升级,需要增加文件在线预览服务,最常见的文件就是office文档,一开始构思几个方案,比如office软件自带的文件转换,openoffice转换,offce365服务,aspose组件转换,最终采用了aspose转换,原因是组件功能完善,不依赖其它软件安装环境 系统设计 文件类型及方案 文件类型 预览方案 word aspsoe-word

  • JavaScript实现图片本地预览功能【不用上传至服务器】

    JavaScript实现图片本地预览功能【不用上传至服务器】

    本文实例讲述了JavaScript实现图片本地预览功能.分享给大家供大家参考,具体如下: 实现一个在file文件域中选定图片文件之后,马上进行预览.不用预上传到服务器,整缩略图再打回前端用Ajax去预览的.直接利用JavaScript即可以完成,而且还可以兼容IE6.具体效果,如下图所示: 具体实现是在非IE浏览器利用HTML5去显示,在IE浏览器则直接调用IE的滤镜功能去实现.具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra

  • vue项目实现github在线预览功能

    最近在使用 vue-cli 脚手架工具构建自己的第一个 vue 项目,有点小激动,想把它上传到 github 并展示一下预览效果,结果踩了好多坑,折腾了大半天才弄好. 这里假设你也是和我一样使用了 vue-cli 搭建了自己的项目,并且项目也已经上传到了 github 问题1 当我们在命令行执行 npm run build 后,项目的目录下会生成一个 dist 文件夹,它里面又包含一个 static 文件夹和一个 index.html 文件,这是 webpack 最终打包好的文件 我们先尝试在浏

  • ASP.NET实现word文档在线预览功能代码

    于是考虑在每个文件上传时为其生存一份HTMl文件,这样就能实现在线预览功能.主要代码如下 复制代码 代码如下: using System; using System.Collections; using System.Configuration; using System.Data; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.HtmlControls; using S

  • asp.net实现word文档在线预览功能的方法

    asp.net实现word文档在线预览功能的方法

    本文实例讲述了asp.net实现word文档在线预览功能的方法.分享给大家供大家参考.具体实现方法如下: 实现方式:office文档转html,再在浏览器里面在线浏览 1.首先引入com组件中office库,然后在程序集扩展中引入word的dll 2.将Microsoft.Office.Interop.Word的嵌入互操作类型设置为 false,如图 3.主要代码: 复制代码 代码如下: using System; using System.Collections.Generic; using

  • java通过jacob实现office在线预览功能

    简介: 这篇文章中的代码都是参考于网上的,只做一个记录.主要做的就是实现一个office在线预览功能. 第一步:装office 第二步:下载jacob 打开网址下载,目前最新的是1.19版本. 第三步:配置jdk 解压下载完的jacob压缩包,根据jdk的版本选择dll中的一个,放入/jdk/jre/bin中. 第四步:在项目中引入jar包 在maven官网上找不到com.jacob的jar包,只能手动引入,这个jar包在jacob的压缩包中有. <dependency> <groupI

  • Java实现办公文档在线预览功能

    Java实现办公文档在线预览功能

    java实现办公文件在线预览功能是一个大家在工作中也许会遇到的需求,网上些公司专门提供这样的服务,不过需要收费 如果想要免费的,可以用openoffice,实现原理就是: 通过第三方工具openoffice,将word.excel.ppt.txt等文件转换为pdf文件流: 当然如果装了Adobe Reader XI,那把pdf直接拖到浏览器页面就可以直接打开预览,前提就是浏览器支持pdf文件浏览. 我这里介绍通过poi实现word.excel.ppt转pdf流,这样就可以在浏览器上实现预览了.

  • vue3如何实现PDF文件在线预览功能

    vue3如何实现PDF文件在线预览功能

    目录 概述 正文 创建 vue3 项目 添加 PDF 预览插件 总结 概述 之前我们用 Reactjs + React-PDF 实现了 React 版的 PDF 文件预览,今天我们用 Vue3 + Vue-PDF 实现 Vue 版本的 PDF 文件在线预览功能. 我们先来看看完成后效果 正文 创建 vue3 项目 我们先创建一个的 Vue3 项目, 在终端中输入命令 pnpm create vite vue-pdf-preview 选择 vue-ts 回车,cd 进入项目根目录,执行 pnpm

随机推荐