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.返回顶部
1、
2、
 
11.返回顶部
 
作者:ylbtech
出处:http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

HTML5: input:file上传类型控制的更多相关文章

  1. HTML5的 input:file上传类型控制(转载)

    http://www.haorooms.com/post/input_file_leixing HTML5的 input:file上传类型控制 2014年8月29日 66352次浏览 一.input: ...

  2. 有关图片上传的相关知识input type=file,HTML5的 input:file上传类型控制

    遇到项目,要求做一个影像系统,对于前端开发需要了解file的相关属性,以及如何开发.工欲善其事,必先利器嘛.度娘一阵子搜索,找资料.这年头,需要的是你解决问题的能力啊! 参考应用:https://ww ...

  3. HTML5的 input:file上传类型控制

    一.input:file属性 属性值有以下几个比较常用: accept:表示可以选择的文件MIME类型,多个MIME类型用英文逗号分开,常用的MIME类型见下表. multiple:是否可以选择多个文 ...

  4. HTML input-file 上传类型控制

    HTML input-file 上传类型控制 input file 属性 accept 表示可以选择的文件MIME类型,多个MIME类型用英文逗号分开,常用的MIME类型见下表. 只能选择png和gi ...

  5. ajax+ashx 完美实现input file上传文件

    1.input file 样式不能满足需求 <input type="file" value="浏览" /> IE8效果图:    Firefox效 ...

  6. 如何用一张图片代替 'input:file' 上传本地文件??

    今天去面试,碰到了一道题,也许是因为紧张或者喝水喝多了,一时竟然没有转过弯来,回来之后一细想原来这么简单,哭笑不得,特此记录一下! 原题是这样的:  如何用一张图片代替 'input:file' 上传 ...

  7. HTML5的 input:file上传 以及 类型控制

    以HTML5的文件上传API 如下demo代码在.html文件打开即可: !DOCTYPE html> <html lang="zh_cn"> <head& ...

  8. 在HTML5的 input:file 上传文件类型控制 遇到的问题

    1.input:file 属性的介绍  先瞅代码吧 <form> <input type="file" name="pic" accept=& ...

  9. input file 上传 判断文件类型、路径是否为空

    <html> <body bgcolor="white"> <TABLE cellSpacing=0 cellPadding=0 width=&quo ...

随机推荐

  1. Hibernate: ids for this class must be manually assigned before calling save():

    原文: http://blog.csdn.net/softimes/article/details/7008875 引起问题的原因: 由Hibernate根据数据库表自动生成的"类名.hbm ...

  2. SharePoint 元数据服务-PowerShell

    1. 获取元数据服务应用程序标识 Get-SPServiceApplication 2. 获取指定的元数据服务应用程序实例 $metadataApp = Get-SPMetadataServiceAp ...

  3. SDWebImage导入问题

    最新的SDWebImage由于是基于ARC模式写的,如果创建的是非ARC醒目的童鞋们注意,导入文件夹之后,先添加ImageIO.framework,mapKit.framework这两个库,在非ARC ...

  4. mysql-5.6.17-win32安装

    下载免安装压缩文件http://dev.mysql.com/downloads/mysql/ 解压到自定义目录,我这里演示的是D:\wamp\mysql\   复制根目录下的my-default.in ...

  5. ListBox item Sort

    将Rss内容读取到Listbox control中, 然后实现按照标题或发布日期进行排序. private void ListItemSort(string type) { if (type == & ...

  6. DS博客作业04--树大作业说明

    大作业题目说明 1.目录树 按照如下目录路径,设计一颗目录树保存.并能实现对目录树遍历.目录路径存在file.txt,格式如下: b.txt c\ ab\cd.txt a\bc.txt ab\d.tx ...

  7. CodeForces - 645F:Cowslip Collections (组合数&&欧拉函数)

    In an attempt to make peace with the Mischievious Mess Makers, Bessie and Farmer John are planning t ...

  8. 蓝桥杯 BASIC-3:字母图形

      基础练习 字母图形   时间限制:1.0s   内存限制:256.0MB        问题描述 利用字母可以组成一些美丽的图形,下面给出了一个例子: ABCDEFG BABCDEF CBABCD ...

  9. Visual Studio 2017 以前的旧格式的 csproj Import 进来的 targets 文件有时不能正确计算属性(PropertyGroup)和集合(ItemGroup)

    我在之前的博客中有教大家如何编写 NuGet 工具包,其中就有编写 .targets 文件. 我在实际的使用中,发现 Visual Studio 2017 带来的含 Sdk 的新 csproj 格式基 ...

  10. HDU 1814 模板题 2-sat

    敲模板做的,不知道怎么就对了,注意一下建边即可··· 贴代码: #include<cstdio> #include<vector> using namespace std; # ...