type=file文件上传H5新特性

1、语法

<input name="myFile" type="file">

2、属性(以下三个仅

HTML5支持,因此存在兼容性问题

(1)multiple
 :表示用户是否可以选择多个值。multiple只能用于type=file和type=email。

(2)accept:服务器接受的文件类型,否则将被忽略。

音频/ *代表声音文件。仅HTML5支持
视频/ *代表视频文件。仅HTML5支持
图像/ *表示图像文件。仅HTML5支持

(3)required:此属性指定用户在提交表单之前必须填写一个值。

3、获取上传的文件信息

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>file multiple</title>
</head>
<body>
<input type="file" multiple="multiple" id="test">
<p id='content'></p>
<script type="text/javascript">
var test = document.getElementById('test'); test.addEventListener('change', function() { var t_files = this.files; var str = ''; for(var i = 0, len = t_files.length; i < len; i  ) { console.log(t_files[i]); str  = '<a href="javascript:void(0)">'   t_files[i].name   '</a><br/>'; }; document.getElementById('content').innerHTML = str; }, false); </script>
</body>
</html>

显示:

 

更具体使用见MDN:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/369622.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

epoll学习

一、epoll_create #include <sys/epoll.h>int epoll_create(int size); int epoll_create1(int flags); 返回&#xff1a;成功非负文件描述符&#xff0c;-1出错size:内核监听数目一共多大 创建一个epoll接口&#xff0c;size参数和select不同&#xff0c;不是fd1&#x…

background使用

background-position 有两个参数&#xff0c;定义背景图片起始位置可选值有&#xff1a; center top left right bottom px % background-size 可以用 px % 设定其宽高 值 cover 完全覆盖背景区域 contain 适应背景区域 background-origin 背景图片可以放置于 content-bo…

java牛客排序算法题_《剑指offer》面试题28:字符串的排列(牛客网版本) java...

输入一个字符串,按字典序打印出该字符串中字符的所有排列。例如输入字符串abc,则打印出由字符a,b,c所能排列出来的所有字符串abc,acb,bac,bca,cab和cba。输入描述: 输入一个字符串,长度不超过9(可能有字符重复),字符只包括大小写字母。这里尤其需要注意2点&#xff1a;1.所有组…

前端之bootstrap模态框

简介&#xff1a;模态框&#xff08;Modal&#xff09;是覆盖在父窗体上的子窗体。通常&#xff0c;目的是显示来自一个单独的源的内容&#xff0c;可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。 Modal简介Modal实现弹出表单Modal实现删除提示框其他用法…

js方式调用php_举例说明JS调用PHP和PHP调用JS的方法

举例说明JS调用PHP和PHP调用JS的方法在学习任何一门编程语言&#xff0c;我们都会听到调用这个词&#xff0c;那么&#xff0c;在javascript中是如何调用php的呢&#xff1f;在php中也可以调用js吗&#xff1f;下面就让我们一起来看看吧。1、JS方式调用PHP文件并取得PHP中的值举…

如何在Hexo中实现自适应响应式相册功能

用最清晰简洁的方法整合一个响应式相册效果 技术选型 由于我选用的主题使用了fancyBox作为图片弹出展示的框架&#xff0c;查看后表示很不错&#xff0c;能满足需要http://fancyapps.com/fancybox/3/图片加载可能会太慢&#xff0c;所以还需要一个图片延迟加载插件 Lazyload想使…

适用于MongoDB和Mongometer的SpiderMonkey至V8

通过10gen将MongoDB 2.3 / 2.4的默认JavaScript引擎从SpiderMonkey切换到V8&#xff0c;我想我将借此机会使用mongometer比较这些发行版的相对性能。 作为安全专家&#xff0c;我真的应该首先研究“ 其他身份验证功能” ……嘿。 我将记录比较过程中所采取的步骤&#xff08;包…

百度联盟广告如何理解按父容器宽度

创建百度联盟广告位的时候&#xff0c;选择按父容器宽度展示&#xff0c;但是在加入之后&#xff0c;查看代码发现广告的宽度为页面的宽度&#xff0c;并不是希望的父级的宽度&#xff0c; 如图在这里查看&#xff1a; 解析&#xff1a;百度联盟广告自动生成的div按父级的div宽…

php中文字转,PHP文字转图片功能原理与实现方法分析

本文实例讲述了PHP文字转图片功能。分享给大家供大家参考&#xff0c;具体如下&#xff1a;这项功能主要用于对邮箱地址、手机等可能被网络爬虫抓取的重要信息的处理。将文字转化为图片绝对是个好注意。验证码的基本生成原理也与此差不多&#xff0c;只是对再对文字转化为图片的…

Java 系列之spring学习--spring搭建(一)

一、新建maven项目 二、引入spring jar包 <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0…

php简单分页,php简单实现分页查询的方法

这篇文章主要为大家详细介绍了php简单实现分页查询的方法&#xff0c;具有一定的参考价值&#xff0c;感兴趣的小伙伴们可以参考一下关于php,最近学了好多&#xff0c;老师跟我们说&#xff0c;现在学的都是php的核心部分&#xff0c;所以我比较注意了一下&#xff0c;也多练习…

django用户认证系统——登录4

用户已经能够在我们的网站注册了&#xff0c;注册就是为了登录&#xff0c;接下来我们为用户提供登录功能。和注册不同的是&#xff0c;Django 已经为我们写好了登录功能的全部代码&#xff0c;我们不必像之前处理注册流程那样费劲了。只需几分钟的简单配置&#xff0c;就可为用…

web前端黑客技术揭秘 6.漏洞挖掘

6.1  普通XSS漏洞自动化挖掘思路 6.1.1  URL上的玄机 6.1.2  HTML中的玄机 2.HTML标签之内 6.1.3  请求中的玄机 6.1.4  关于存储型XSS挖掘 6.2.1  HTML与JavaScript自解码机制 <input type"button" id"exec_btn" value"exec" on…

Webpack基础使用

目录 一.什么是Webpack 二.为什么要使用Webpack 三.Webpack的使用 1.下载yarn包管理器 2.Webpack的安装 3.Webpack的简单使用 4.效果 四.Webpack打包流程 一.什么是Webpack Webpack是一个静态模块打包工具 二.为什么要使用Webpack 在开发中&#xff0c;我们常常会遇到…

阿帕奇骆驼遇见Redis

键值商店的兰博基尼 Camel是最好的面包集成框架&#xff0c;在本文中&#xff0c;我将向您展示如何通过利用另一个出色的项目Redis使它更加强大。 Camel 2.11即将发布&#xff0c;具有许多新功能&#xff0c;错误修复和组件。 这些新组件中的几个是我创作的&#xff0c; red…

HTML 教程- (HTML5 标准)摘抄笔记

HTML 教程- (HTML5 标准) 教程网址&#xff1a;http://www.runoob.com/html/html-tutorial.html http://blog.csdn.net/ljfbest/article/details/6700148 HTML版本 从初期的网络诞生后&#xff0c;已经出现了许多HTML版本: 版本发布时间HTML1991HTML 1993HTML 2.01995HTML 3…

Java EE CDI ConversationScoped示例

在本教程中&#xff0c;我们将向您展示如何在Web应用程序中创建和使用ConversationScoped Bean。 在CDI中&#xff0c;bean是定义应用程序状态和/或逻辑的上下文对象的源。 如果容器可以根据CDI规范中定义的生命周期上下文模型来管理其实例的生命周期&#xff0c;则Java EE组件…

Git 中文教程

以下内容转载自&#xff1a;http://www.open-open.com/lib/view/open1328928294702.html Git是一个分布式的版本控制工具&#xff0c;本篇文章从介绍Git开始&#xff0c;重点 在于介绍Git的基本命令和使用技巧&#xff0c;让你尝试使用Git的同时&#xff0c;体验到原来一个版本…

php markdown的转化函数,markdown公式转为知乎格式

在知乎中写技术类文章&#xff0c;经常会用到markdown知乎文章可以导入markdown格式&#xff0c;但是不支持Latex公式。知乎大神提供了替代方案&#xff1a; https://zhuanlan.zhihu.com/p/69142198为实现自动化&#xff0c;用python将其简易实现&#xff0c;代码如下&#xff…

Java EE CDI Producer方法教程

这是CDI Producer方法的教程。 在CDI中&#xff0c;生产者方法生成一个可以注入的对象。 当我们要注入本身不是bean的对象&#xff0c;要注入的对象的具体类型在运行时可能有所不同&#xff0c;或者当对象需要一些bean构造函数不执行的自定义初始化时&#xff0c;可以使用生产者…