HTML5上传图片并预览

STPace 2020-01-11

一个简易的实现：

<!DOCTYPE html>  
<html>  
<head>  
    <title>HTML5上传图片并预览</title>  
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>  
</head>  
<body>  
    <h3>请选择图片文件：PNG/JPG/JPEG/SVG/GIF</h3>  
    <form name="form0" id="form0">  
        <input type="file" name="file0" id="file0" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"/><br>  
        <img src="" id="img0" style="width: 20rem;height: 15rem;">
    </form>   
    <script type="text/javascript">
        $("#file0").change(function(){  
        var objUrl = getObjectURL(this.files[0]) ;//获取文件信息  
        console.log("objUrl = "+objUrl);  
            if (objUrl) {  
                  $("#img0").attr("src", objUrl);  
            }   
        });

        function getObjectURL(file) {  
            var url = null;   
            if(window.createObjectURL!=undefined) {  
                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上传图片并预览

真正的传送给后台可以用ajax，但是我还不会搭后台

参考链接：

1. https://blog.csdn.net/qq_41485414/article/details/80051845

2. https://blog.csdn.net/x550392236/article/details/76690927

: STPace

相关推荐

一篇文章带你了解HTML5 MathML

HTML5 可以在文档中使用 MathML 元素，对应的标签是 ... 。MathML 是数学标记语言，是一种基于XML的标准，用来在互联网上书写数学符号和公式的置标语言。大部分浏览器都支持 MathML 标签，如果你的浏览器不支持该标签，可以使用最新版的

wusiye 0喜欢 / 0评论 2020-10-23

HTML5标签2

表格的现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。在HTML网页中，要想创建表格，就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...

gufudhn 0喜欢 / 0评论 2020-08-09

HTML 5 <input> 标签

<input> 标签规定用户可输入数据的输入字段。根据不同的 type 属性，输入字段有多种形态。输入字段可以是文本字段、复选框、密码字段、单选按钮、按钮等等。在 HTML 4.01 中，"align" 属性已被废弃，HTM

nercon 0喜欢 / 0评论 2020-08-01

HTML5的新语义和新结构元素

自1999年以后HTML 4.01 已经改变了很多,今天，在HTML 4.01中的几个已经被废弃，这些元素在HTML5中已经被删除或重新定义。为了更好地处理今天的互联网应用，HTML5添加了很多新元素及功能，比如: 图形的绘制，多媒体内容，更好的页面结构，

swiftwwj 0喜欢 / 0评论 2020-07-21

HTML5中修改表单验证默认提示语句

HTML5中针对表单新增的验证属性如required、pattern以及一些特定input类型，当验证不通过时，都有默认的提示语句，但实践中发现并不怎么友好，因此，需要自定义提示语句，使用setCustomValidity()。在此之前，需要介绍一下表单的

nercon 0喜欢 / 0评论 2020-07-16

indexedDB 数据库_html5中Web离线数据库的使用

在html5 的本地存储中，有一种叫 indexedDB 的数据库，该数据库是一种存储在客户端本地的 NoSQL数据库，它可以存储大量的数据。web Storage可以方便灵活的在本地存取简单数据，但是对于大量结构化存储，indexedDB 的优势就更加明

饮马天涯 0喜欢 / 0评论 2020-07-05

[Javascript] HTML5 DOM project

<p>You have <span class="todos-count"></span> items</p>. <button type="button" cl

Lophole 0喜欢 / 0评论 2020-06-28

Html5—— <input> autocomplete 属性

autocomplete 属性是 HTML5 中的新属性。autocomplete 属性规定输入字段是否应该启用自动完成功能。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。即，当你输入过一次，提交后，下次再点击输入框时，会

gufudhn 0喜欢 / 0评论 2020-06-12

疯狂HTML5 CSS 3 JavaScript讲义 (李刚) 高清PDF扫描版 279M完整版下载

《疯狂html 5/css 3/javascript讲义》的定位是一本前端开发的“实战性”图书，因此在介绍各知识点时并不是简单地停留在知识点层面阐述，而是结合了大量实例来让读者对照练习、学以致用。该游戏综合运用了html 5的绘图支持、客户端存储等技术，具

csstpeixun 0喜欢 / 0评论 2020-06-11

Vue.Js（html5） + Java实现文件分片上传

代码从项目中剥离修改，未经测试，仅提供思路。let bufferLength = 1024 * 1024 * 5;需要注意的是，Blob.slice,文件块包含start指向的字节，而不包含end指向的字节，在使用时要注意Blob的边界。使用ByteBuf

huzijia 0喜欢 / 0评论 2020-06-09

[JavaScript] HTML5 播放hls流媒体视频流

PC端chrome，IE，Firefox以及集成以上内核的各种浏览器，以及旧版的Android SDK的webview 不能播放

WebVincent 0喜欢 / 0评论 2020-06-06

html5 video视频，本地环境好的，线上环境，不能播放

本地环境ok，发布到线上不能播放。之前看这个视频，把video放在public文件夹下的。

niehanmin 0喜欢 / 0评论 2020-06-03

HTML5

万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言的第五次重大修改，作为新HTML语言，具有新的元素、属性和行为。<source src="./media/snow.ogg" type="audio.mpeg&

行吟阁 0喜欢 / 0评论 2020-05-30

HTML5中History.back()页面后退刷新页面

在开发中经常会遇到在一个页面操作完返回上一个页面，此时要求上个页面展示最新数据的需求。　　返回了A1页面同时A1页面进行了刷新！

qsdnet我想学编程 0喜欢 / 0评论 2020-05-26

分享一些酷酷的特效，希望你也能够喜欢

id=ha200bcjbb畜牧资讯官方app页面模板。新闻资讯手机模板html下载。id=ha202bhcib简单的手机绑定银行卡页面，手机添加银行卡信息列页面模板。id=ha2bh01a2jcss3 Animation属性制作夜晚的景色搭配悬浮发光圆点

gufudhn 0喜欢 / 0评论 2020-05-25

这些例子很炫，感兴趣的童鞋可以了解一下

id=kja1abajb黑色通用的网络品牌设计公司介绍html5单页模板，广告品牌设计公司网站单页模板。echarts中国地图城市区块选择代码点击》echarts中国地图城市区块选择代码html5基于echarts.js地图插件制作中国地图点击选择城市弹出

qsdnet我想学编程 0喜欢 / 0评论 2020-05-19

HTML5 Web SQL 数据库

Web SQL 数据库 API 并不是 HTML5 规范的一部分，但是它是一个独立的规范，引入了一组使用 SQL 操作客户端数据库的 APIs。如果你是一个 Web 后端程序员，应该很容易理解 SQL 的操作。你也可以参考我们的 SQL 教程，了解更多数据

suixinsuoyu 0喜欢 / 0评论 2020-05-15

HTML5 服务器发送事件(Server-Sent Events)

HTML5 服务器发送事件允许网页获得来自服务器的更新。以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。所有主流浏览器均支持服务器发送事件，除了 Internet Explorer。创建一个新的 EventSource 对象，然后规定发送更新的

HSdiana 0喜欢 / 0评论 2020-05-15

HTML5 Web Workers

web worker 是运行在后台的 JavaScript，不会影响页面的性能。当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。Inter

PioneerFan 0喜欢 / 0评论 2020-05-15

HTML5 应用程序缓存

使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。减少服务器负载 - 浏览器将只从服务器下载更新过或更改

GimmeS 0喜欢 / 0评论 2020-05-15

html5标签类型大全

我们前面说过，HTML定义网页的结构，CSS给美化页面结构，接下来这几节课，我们就主要讲解构成HTML结构的元素，也就是HTML标签。HTML标签有很多，这里我们学习最为常用的，后面有些较少用的，我们可以查下手册就可以了。为了使网页更具有语义化，将标题标签

owhile 0喜欢 / 0评论 2020-05-15

5个HTML5的常用本地存储方式详解与介绍

在 HTML5 规范之前，存储主要是用 cookies 。在请求头上带着数据；cookies 的主要应用：购物车、客户登录。解决 4k 的大小问题；以键值对的方式存储，永久存储，永不失效，除非手动删除。大小：每个域名5M。注意：IE9 localStora

KungLun 0喜欢 / 0评论 2020-02-03

html5基础用法

标签对齐属性设置：align="right/left/center"，默认是left，当设置成right时标签右对齐。target="_blank" ：当点击超链接时在新的页面中打开，如果不设置target，则超链接

nercon 0喜欢 / 0评论 2020-05-04

4.9 html5新增

section：更偏于划分区域。article：更偏向于内容的展示。figure：代表一个独立的区域figcaptionfigure区域的标题aside：侧边栏time：时间类mark:高亮显示文本dialog:定义一个对话框视频：<video sr

行吟阁 0喜欢 / 0评论 2020-04-10

java 企业门户网站源码自适应响应式 freemarker 静态引擎 html5 SSM

4.springmvc +spring4.3.7+ mybaits3.3SSM 普通java web数据库：mysql

rionchen 0喜欢 / 0评论 2020-04-09

HTML5：给汉字加拼音？收起展开组件？

来看看 HTML 的历史和规范常识。HTML 规范是 W3C 与 WHATWG 合作共同产出的，HTML5 因此也不例外。WHATWG 指 Web Hypertext Application Technology Working Group. 但话说天下大

WebVincent 0喜欢 / 0评论 2020-04-07

java 企业门户网站源码自适应响应式 freemarker 静态引擎 html5 SSM

4.springmvc +spring4.3.7+ mybaits3.3SSM 普通java web数据库：mysql

86384798 0喜欢 / 0评论 2020-04-04

HTML5实现浏览器端大文件分片上传

我们平时经常做的是上传文件，上传文件夹与上传文件类似，但也有一些不同之处，这次做了上传文件夹就记录下以备后用。支持文件夹的上传，要求服务端能够保留层级结构，并且能够续传。enctype属性规定发送到服务器之前应该如何对表单数据进行编码。enctype作用是

qsdnet我想学编程 0喜欢 / 0评论 2020-03-27

HTML5入门

DOCTYPE HTML>声明不区分大小写、用来告知 Web 浏览器页面使用了哪种 HTML 版本。

爱好HtmlCssJs 0喜欢 / 0评论 2020-03-25

从零开始的HTML5之旅（六）

HTML5 Geolocation用于定位用户的位置。鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。IE9、Firefox、Chrome、Safari以及Opera支持地理定位。对于拥有GPS的设备，定位将更加准确。``getCu

WebVincent 0喜欢 / 0评论 2020-03-25

Html5之自定义属性(data-,dataset)

box1.dataset.name = ‘马斯克‘box2.setAttribute以上就是本文的全部内容，希望对大家的学习有所帮助

lyg0 0喜欢 / 0评论 2020-03-20

从零开始的HTML5之旅（三）

HTML5规定了一种通过audio元素包含音频的方法。audio能够播放声音文件和音频流。从上面的格式中我们可以知道，在实际应用中仅仅只需要用到Ogg格式和Mp3格式。??audio的属性、方法、事件和video基本一致，可以参考从零开始的HTML5之旅（

STPace 0喜欢 / 0评论 2020-03-14

前端基础之html5css3

前端学习这次是我的第三次启动学习计划，这次计划跟以往的不一样。本次计划我打算闭关一个月，全身心的去学习，一切都放在脑后。这次如果我再放弃的话，直播吃翔哈！大家一起监督我吧。努力学习的人最帅。我知道我们已经不可能了，所以算是一种怀念的方式吧，好啦！废话不多说

viewerlin 0喜欢 / 0评论 2020-03-07

通过H5实现html页面的录音和播放（Recorder用于html5录音）

--相应格式支持文件；如果需要多个格式支持，把这些格式的编码引擎js文件放到后面统统加载进来即可-->. --如果此格式有额外的编码引擎的话，也要加上-->. --可选的扩展支持项-->. var recOpen=function{//一

STPace 0喜欢 / 0评论 2020-03-06

Canvas

Canvas是HTML5新增的一个双标签，目的在页面设置一个画布，可以进行画任何的线、图形、填充等一系列的操作，操作画图的是js。另外Canvas不仅仅提供简单的二维矢量绘图，也提供了三维的绘图，以及图片处理等一系列的api支持。<canvas wi

nercon 0喜欢 / 0评论 2020-03-06

HTML5新特性--svg-echarts(重点)-拖动API-WebWorker

#渐变特效对象:一种特效样式。#渐变特效对象:创建渐变对象 <defs> 在指定图形应用。x1="" y1="" 起点坐标写像素0,0 500,0写百分0% 0% 100%. #数字模糊级别 1~10 .

owhile 0喜欢 / 0评论 2020-03-05

HTML5 audio API事件

<!DOCTYPE html>. width:500px;var myaudio=new Audio();myaudio.src="data/imooc.mp3";myaudio.play();<!DOCTYPE ht

WebVincent 0喜欢 / 0评论 2020-03-04

基于 HTML5 Canvas 的 3D 热力云图效果

数据蕴藏价值，但数据的价值需要用IT技术去发现、探索，可视化可以帮助人更好的去分析数据，信息的质量很大程度上依赖于其呈现方式。在数据分析上，热力图无疑是一种很好的方式。在很多行业中都有着广泛的应用。最近刚好项目中需要用到3D热力图的效果展示。大楼内的人员分

zsh 0喜欢 / 0评论 2020-03-01

JavaWeb——第2章HTML5技术

本章首先介绍HTML5页面的文档结构，然后介绍HTML5的内容架构与文本、超链接、多媒体、表格及表单。HTML5文件是由一些标签语句组成的文本文件，标签标识了内容和类型，Web浏览器通过解析这些标签进行显示。元素是标记语言的基本单元，元素是通过使用HTML

swiftwwj 0喜欢 / 0评论 2020-03-01

HTML5 -- 拖放

拖放是 HTML5 标准的组成部分。拖放是一种常见的特性，即抓取对象以后拖到另一个位置。

swiftwwj 0喜欢 / 0评论 2020-02-23

5.9 HTML5 新增表单控件 ---不是特别重要

HTML5 新增表单控件新增类型：网址邮箱日期时间星期数量范围电话颜色搜索这些控件基本不使用：因为在不同的浏览器中效果不一样。产品设计中不允许多个浏览器效果不同，必须统一。新增常用表单控件属性：1、placeholder 设置文本框默认提

swiftwwj 0喜欢 / 0评论 2020-02-23

5.8 HTML5新结构标签

1、header 页面头部、页眉2、nav 页面导航3、article 一篇文章4、section 文章中的章节5、aside 侧边栏6、footer 页面底部、页脚

owhile 0喜欢 / 0评论 2020-02-23

html5_延迟(defer)脚本与异步(async)脚本

解决上述问题的传统做法是将<script>写在<body>内部的最后面。而延迟脚本的作用则是与之相同，即在文档页面没有完全解析之前，不对<script>元素进行解析。--即在script标签内写入一个defer即可--&

lyg0 0喜欢 / 0评论 2020-02-18

html5_音视频元素_audio&video

autoplay：布尔值，设置为true后音视频会自动播放。metadata：只预加载音视频元数据。如媒体字节数、第一帧、播放列表、持续时间等。视频不可用时同样显示它。width、height：只对<video>元素有效，指定视频播放器的宽高。

黎豆子 0喜欢 / 0评论 2020-02-18

移动应用开发的六大编程语言

过去五年中，移动应用程序开发行业实现了跨越式增长，改变了全球业务运作方式。随着企业最近使移动应用程序适应其生产力，以及跨平台移动设备的快速创新，它呼吁移动应用程序开发人员使用一种语言和许多可重用代码为许多不同平台编写应用程序的多个版本。一旦您打算实现您的移

InterestSoul 0喜欢 / 0评论 2020-02-17

拿到十份互联网公司Offer，他是怎样学好web前端开发的？

Web前端工程师是近几年的新兴职业，也是目前火爆而且高薪的职业。不同的公司也有不同的叫法，比如：网页界面开发，网站设计等，要学好web前端开发，需要掌握什么方法与技巧？这个是最简单的，也是最基础的。为什么会说css+div呢?因为我上面说了div就是 ht

haohong 0喜欢 / 0评论 2020-02-14

2月1日寒假总结

原生APP、WebAPP和混合APP。Web技术本身需要浏览器的支持才能进行展示和用户交互，因此主要用到的技术是HTML5、Javascript、CSS等。

行吟阁 0喜欢 / 0评论 2020-02-01

HTML5文档类型如何定义，有哪些标签，以及如何使用，从整体认识HTML5

figure 一组多媒体内容。hgroup 区块的相关信息。dialog 对话框 / 会话框。sublime安装emmet插件，可以使用tab键快速补全标签

黎豆子 0喜欢 / 0评论 2020-02-01

HTML5学习之浏览器的私有前缀

先写加私有前缀的，再写没有私有前缀的。

qsdnet我想学编程 0喜欢 / 0评论 2020-01-29

HTML5隐藏播放器播放背景音乐

一个客户要求给网站添加一个背景音乐，我用的是html5添加网页背景音乐的代码，在此记录一下以后有用。html5方法二：<videocontrols=""autoplay=""name="media&q

玫瑰小妖 0喜欢 / 0评论 2020-01-24