HTML5: input:file上传类型控制
ylbtech-HTML5: input:file上传类型控制 |
1. 一、input:file 属性返回顶部 |
一、input:file属性
属性值有以下几个比较常用:
accept:表示可以选择的文件MIME类型,多个MIME类型用英文逗号分开,常用的MIME类型见下表。
multiple:是否可以选择多个文件,多个文件时其value值为第一个文件的虚拟路径。
1、accept
只能选择png和gif图片
<input id="fileId1" type="file" accept="image/png,image/gif" name="file" />
2、multiple
多文件上传
<input id="fileId2" type="file" multiple="multiple" name="file" />
3、常用MIME类型
后缀名 MIME名称
*.3gpp audio/3gpp, video/3gpp
*.ac3 audio/ac3
*.asf allpication/vnd.ms-asf
*.au audio/basic
*.css text/css
*.csv text/csv
*.doc application/msword
*.dot application/msword
*.dtd application/xml-dtd
*.dwg image/vnd.dwg
*.dxf image/vnd.dxf
*.gif image/gif
*.htm text/html
*.html text/html
*.jp2 image/jp2
*.jpe image/jpeg
*.jpeg image/jpeg
*.jpg image/jpeg
*.js text/javascript, application/javascript
*.json application/json
*.mp2 audio/mpeg, video/mpeg
*.mp3 audio/mpeg
*.mp4 audio/mp4, video/mp4
*.mpeg video/mpeg
*.mpg video/mpeg
*.mpp application/vnd.ms-project
*.ogg application/ogg, audio/ogg
*.pdf application/pdf
*.png image/png
*.pot application/vnd.ms-powerpoint
*.pps application/vnd.ms-powerpoint
*.ppt application/vnd.ms-powerpoint
*.rtf application/rtf, text/rtf
*.svf image/vnd.svf
*.tif image/tiff
*.tiff image/tiff
*.txt text/plain
*.wdb application/vnd.ms-works
*.wps application/vnd.ms-works
*.xhtml application/xhtml+xml
*.xlc application/vnd.ms-excel
*.xlm application/vnd.ms-excel
*.xls application/vnd.ms-excel
*.xlt application/vnd.ms-excel
*.xlw application/vnd.ms-excel
*.xml text/xml, application/xml
*.zip aplication/zip
*.xlsx application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
2. 二、样式美化返回顶部 |
二、样式美化
请看博客:css input[type=file] 样式美化,input上传按钮美化 http://www.haorooms.com/post/css_input_uploadmh
3. 三、AJAX上传文件返回顶部 |
三、AJAX上传文件
在说到ajax上传文件。ajax上传的时候,需要获得input:file选择的文件(可能为多个文件),获取其文件列表为:
// input标签的files属性
document.querySelector("#fileId").files
// 返回的是一个文件列表数组
获得的文件列表,然后遍历插入到表单数据当中。即:
// 获得上传文件DOM对象
var oFiles = document.querySelector("#fileId"); // 实例化一个表单数据对象
var formData = new FormData(); // 遍历图片文件列表,插入到表单数据中
for (var i = 0, file; file = oFiles[i]; i++) {
// 文件名称,文件对象
formData.append(file.name, file);
}
获得表单数据之后,就可以用ajax的POST上传。
// 实例化一个AJAX对象
var xhr = new XMLHttpRequest();
xhr.onload = function() {
alert("上传成功!");
}
xhr.open("POST", "upload.php", true); // 发送表单数据
xhr.send(formData);
上传到服务器之后,获取到文件列表为:
Array
(
[jpg_jpg] => Array
(
[name] => jpg.jpg
[type] => image/jpeg
[tmp_name] => D:\xampp\tmp\phpA595.tmp
[error] => 0
[size] => 133363
) [png_png] => Array
(
[name] => png.png
[type] => image/png
[tmp_name] => D:\xampp\tmp\phpA5A6.tmp
[error] => 0
[size] => 1214628
) )
在服务端循环遍历这个数组就可以上传文件了。
4.返回顶部 |
5.返回顶部 |
6.返回顶部 |
7.返回顶部 |
8.返回顶部 |
9.返回顶部 |
10.返回顶部 |
11.返回顶部 |
![]() |
作者:ylbtech 出处:http://ylbtech.cnblogs.com/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。 |
HTML5: input:file上传类型控制的更多相关文章
- HTML5的 input:file上传类型控制(转载)
http://www.haorooms.com/post/input_file_leixing HTML5的 input:file上传类型控制 2014年8月29日 66352次浏览 一.input: ...
- 有关图片上传的相关知识input type=file,HTML5的 input:file上传类型控制
遇到项目,要求做一个影像系统,对于前端开发需要了解file的相关属性,以及如何开发.工欲善其事,必先利器嘛.度娘一阵子搜索,找资料.这年头,需要的是你解决问题的能力啊! 参考应用:https://ww ...
- HTML5的 input:file上传类型控制
一.input:file属性 属性值有以下几个比较常用: accept:表示可以选择的文件MIME类型,多个MIME类型用英文逗号分开,常用的MIME类型见下表. multiple:是否可以选择多个文 ...
- HTML input-file 上传类型控制
HTML input-file 上传类型控制 input file 属性 accept 表示可以选择的文件MIME类型,多个MIME类型用英文逗号分开,常用的MIME类型见下表. 只能选择png和gi ...
- ajax+ashx 完美实现input file上传文件
1.input file 样式不能满足需求 <input type="file" value="浏览" /> IE8效果图: Firefox效 ...
- 如何用一张图片代替 'input:file' 上传本地文件??
今天去面试,碰到了一道题,也许是因为紧张或者喝水喝多了,一时竟然没有转过弯来,回来之后一细想原来这么简单,哭笑不得,特此记录一下! 原题是这样的: 如何用一张图片代替 'input:file' 上传 ...
- HTML5的 input:file上传 以及 类型控制
以HTML5的文件上传API 如下demo代码在.html文件打开即可: !DOCTYPE html> <html lang="zh_cn"> <head& ...
- 在HTML5的 input:file 上传文件类型控制 遇到的问题
1.input:file 属性的介绍 先瞅代码吧 <form> <input type="file" name="pic" accept=& ...
- input file 上传 判断文件类型、路径是否为空
<html> <body bgcolor="white"> <TABLE cellSpacing=0 cellPadding=0 width=&quo ...
随机推荐
- Hibernate: ids for this class must be manually assigned before calling save():
原文: http://blog.csdn.net/softimes/article/details/7008875 引起问题的原因: 由Hibernate根据数据库表自动生成的"类名.hbm ...
- SharePoint 元数据服务-PowerShell
1. 获取元数据服务应用程序标识 Get-SPServiceApplication 2. 获取指定的元数据服务应用程序实例 $metadataApp = Get-SPMetadataServiceAp ...
- SDWebImage导入问题
最新的SDWebImage由于是基于ARC模式写的,如果创建的是非ARC醒目的童鞋们注意,导入文件夹之后,先添加ImageIO.framework,mapKit.framework这两个库,在非ARC ...
- mysql-5.6.17-win32安装
下载免安装压缩文件http://dev.mysql.com/downloads/mysql/ 解压到自定义目录,我这里演示的是D:\wamp\mysql\ 复制根目录下的my-default.in ...
- ListBox item Sort
将Rss内容读取到Listbox control中, 然后实现按照标题或发布日期进行排序. private void ListItemSort(string type) { if (type == & ...
- DS博客作业04--树大作业说明
大作业题目说明 1.目录树 按照如下目录路径,设计一颗目录树保存.并能实现对目录树遍历.目录路径存在file.txt,格式如下: b.txt c\ ab\cd.txt a\bc.txt ab\d.tx ...
- CodeForces - 645F:Cowslip Collections (组合数&&欧拉函数)
In an attempt to make peace with the Mischievious Mess Makers, Bessie and Farmer John are planning t ...
- 蓝桥杯 BASIC-3:字母图形
基础练习 字母图形 时间限制:1.0s 内存限制:256.0MB 问题描述 利用字母可以组成一些美丽的图形,下面给出了一个例子: ABCDEFG BABCDEF CBABCD ...
- Visual Studio 2017 以前的旧格式的 csproj Import 进来的 targets 文件有时不能正确计算属性(PropertyGroup)和集合(ItemGroup)
我在之前的博客中有教大家如何编写 NuGet 工具包,其中就有编写 .targets 文件. 我在实际的使用中,发现 Visual Studio 2017 带来的含 Sdk 的新 csproj 格式基 ...
- HDU 1814 模板题 2-sat
敲模板做的,不知道怎么就对了,注意一下建边即可··· 贴代码: #include<cstdio> #include<vector> using namespace std; # ...