900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > php 手机网站上传文件 HTML5的 input:file上传类型控制 html5手机上传图片调用API。...

php 手机网站上传文件 HTML5的 input:file上传类型控制 html5手机上传图片调用API。...

时间:2021-08-13 15:11:57

相关推荐

php 手机网站上传文件 HTML5的 input:file上传类型控制 html5手机上传图片调用API。...

调用摄像、视频

调用语音

调用相机

调用相机图片或者相册

一、input:file属性

属性值有以下几个比较常用:

accept:表示可以选择的文件MIME类型,多个MIME类型用英文逗号分开,常用的MIME类型见下表。

multiple:是否可以选择多个文件,多个文件时其value值为第一个文件的虚拟路径。

1、accept

只能选择png和gif图片

2、multiple

多文件上传

3、常用MIME类型后缀名MIME名称

*.3gppaudio/3gpp,video/3gpp

*.ac3audio/ac3

*.asfallpication/vnd.ms-asf

*.auaudio/basic

*.csstext/css

*.csvtext/csv

*.docapplication/msword

*.dotapplication/msword

*.dtdapplication/xml-dtd

*.dwgimage/vnd.dwg

*.dxfimage/vnd.dxf

*.gifimage/gif

*.htmtext/html

*.htmltext/html

*.jp2image/jp2

*.jpeimage/jpeg

*.jpegimage/jpeg

*.jpgimage/jpeg

*.jstext/javascript,application/javascript

*.jsonapplication/json

*.mp2audio/mpeg,video/mpeg

*.mp3audio/mpeg

*.mp4audio/mp4,video/mp4

*.mpegvideo/mpeg

*.mpgvideo/mpeg

*.mppapplication/vnd.ms-project

*.oggapplication/ogg,audio/ogg

*.pdfapplication/pdf

*.pngimage/png

*.potapplication/vnd.ms-powerpoint

*.ppsapplication/vnd.ms-powerpoint

*.pptapplication/vnd.ms-powerpoint

*.rtfapplication/rtf,text/rtf

*.svfimage/vnd.svf

*.tifimage/tiff

*.tiffimage/tiff

*.txttext/plain

*.wdbapplication/vnd.ms-works

*.wpsapplication/vnd.ms-works

*.xhtmlapplication/xhtml+xml

*.xlcapplication/vnd.ms-excel

*.xlmapplication/vnd.ms-excel

*.xlsapplication/vnd.ms-excel

*.xltapplication/vnd.ms-excel

*.xlwapplication/vnd.ms-excel

*.xmltext/xml,application/xml

*.zipaplication/zip

*.xlsxapplication/vnd.openxmlformats-officedocument.spreadsheetml.sheet

三、AJAX上传文件

在说到ajax上传文件,之前的文章也有说过(详见:JS学习32:html5拖拽图片批量ajax无刷新进度上传)。ajax上传的时候,需要获得input:file选择的文件(可能为多个文件),获取其文件列表为://input标签的files属性

document.querySelector("#fileId").files

//返回的是一个文件列表数组

获得的文件列表,然后遍历插入到表单数据当中。即://获得上传文件DOM对象

varoFiles=document.querySelector("#fileId");

//实例化一个表单数据对象

varformData=newFormData();

//遍历图片文件列表,插入到表单数据中

for(vari=0,file;file=oFiles[i];i++){

//文件名称,文件对象

formData.append(file.name,file);

}

获得表单数据之后,就可以用ajax的POST上传。//实例化一个AJAX对象

varxhr=newXMLHttpRequest();

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@ ,收到邮件会第一时间处理。

4、如侵犯到任何版权问题,请立即告知本站(立即在线告知),本站将及时删除并致以最深的歉意

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。