php 手机网站上传文件,HTML5的 input:file上传类型控制,html5手机上传图片调用API。...
调用摄像、视频
调用语音
调用相机
调用相机 图片或者相册
一、input:file属性
属性值有以下几个比较常用:
accept:表示可以选择的文件MIME类型,多个MIME类型用英文逗号分开,常用的MIME类型见下表。
multiple:是否可以选择多个文件,多个文件时其value值为第一个文件的虚拟路径。
1、accept
只能选择png和gif图片
2、multiple
多文件上传
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
三、AJAX上传文件
在说到ajax上传文件,之前的文章也有说过(详见:JS学习32:html5拖拽图片批量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
)
)
在服务端循环遍历这个数组就可以上传文件了。
浏览器启用弹出窗口过滤功能,将无法跳转到下载页。在浏览器地址栏右边符号提示处点击允许就可以了!
郑重声明:
1、本站源码仅供个人学习研究和交流使用,请于下载后二十四小时内删除
2、本站大多资源来源于互联网、用户分享,仅供学习交流使用,本站不提供任何技术支持
3、本站联系方式Email:admin@youhutong.com ,收到邮件会第一时间处理。
4、如侵犯到任何版权问题,请立即告知本站(立即在线告知),本站将及时删除并致以最深的歉意
php 手机网站上传文件,HTML5的 input:file上传类型控制,html5手机上传图片调用API。...相关推荐
- HTML5的 input:file上传类型控制
一.input:file属性 属性值有以下几个比较常用: accept:表示可以选择的文件MIME类型,多个MIME类型用英文逗号分开,常用的MIME类型见下表. multiple:是否可以选择多个文 ...
- 实现php a标签文件,HTML_如何点击a标签实现弹出input file上传文件对话框,html 复制代码代码如下: SPAN - phpStudy...
如何点击a标签实现弹出input file上传文件对话框 html 复制代码代码如下: <div> <a href="###">添加图片a> < ...
- 码云上传文件夹_码云上传本地文件夹,码云只能上传20个文件的突破方法
码云官方地址:https://gitee.com/ 很多人不知道码云上传本地文件夹怎么操作,或者如何突破码云只能上传20个文件限制的问题,今天就来说说这事的方法吧. 简介: 码云是媲美GitHub的代 ...
- vue method ajax上传文件,前端上传文件追根溯源_和_antd_vue上传文件实例
背景 平,过现前个能文使近记接的端问对字用近记接时工作中经常会遇到需要上传文件的情况,如果你用ant design 或者element ,它们都提供了上传的组件. 我们分别来看一下element 和 ...
- Input file 上传文件
Input file 上传文件 介绍 <input> type 类型为 file 的 input 元素使得用户可以选择一个或多个元素以提交表单的方式上传到服务器上,或者通过 Javascr ...
- Spring Boot 上传文件(spring boot upload file)
本篇文章将说明在Spring Boot web程序中如何上传文件. 开发环境: 1. eclipse Oxygen Release (4.7.0) 2. Spring Boot 1.4.3 RELEA ...
- input type='file' 上传文件时显示文件名及上传进度
https://blog.csdn.net/qq_36687640/article/details/78551217 1.input type='file' 上传文件时显示文件名及上传进度 <i ...
- ajax+ashx 完美实现input file上传文件
1.input file 样式不能满足需求 <input type="file" value="浏览" /> IE8效果图: Firefox效 ...
- QQ群、讨论组上传文件,由于网络原因上传失败?
QQ群.讨论组上传文件,由于网络原因上传失败? 听语音 | 浏览:194 | 更新:2016-10-29 14:17 | 标签:软件 电脑 1 2 3 4 分步阅读 QQ群.讨论组上传文件,总是由于网 ...
最新文章
- 计算机组成原理 输入输出系统,计算机组成原理(第七章输入输出系统
- 老版本的Spring应用该如何应对这次的RCE漏洞?
- 中铁CA根证书安装不成功的解决办法
- html金额自动换算成大写,[求助]word文档中金额数字自动转换为大写
- window版docker安装及配置
- 解决 Windows 和 Ubuntu 时间不一致的问题--转载
- windows cmd 窗口 显示信息慢_Windows系统直接运行Linux,竟是如此简单
- 当集合a为空集时a的取值范围_高中数学必修一第一章集合分节练习和章末测试题含答案[1] 2...
- 计算机专业理论,计算机专业综合理论.doc
- react context_使用React Context API-入门
- Linux内核调试原理和工具介绍--理解静态插装/动态插装、tracepoint、ftrace、kprobe、SystemTap、Perf、eBPF
- Lintcode--007(不同的子序列)
- db2:根据TABLEID找table
- HDFS原理(超详解)
- 【MFC】字体类——CFont
- 压力测试工具----JMeter
- Linux内核安全模块学习-导言
- 【阿里网盘】阿里网盘使用全攻略
- 推荐系统--开源代码
- 以太网卡、IB网卡的详细介绍以及区别分析