七牛视频上传

HTML5的 input:file上传类型控制

JS读取/创建本地文件及目录文件夹的方法

JS音频转码

HTML5的 input:file上传类型控制

2014年8月29日94745次浏览

一、input:file属性

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

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

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

1、accept

只能选择png和gif图片

只能选择png和gif图片

2、multiple

多文件上传


多文件上传

3、常用MIME类型

后缀名MIME名称*.3gppaudio/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

二、样式美化

请看博客:css input[type=file] 样式美化,input上传按钮美化http://www.haorooms.com/post/css_input_uploadmh

三、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))

在服务端循环遍历这个数组就可以上传文件了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,688评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,559评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,749评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,581评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,741评论 3 271
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,684评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,122评论 2 292
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,847评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,441评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,939评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,333评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,783评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,275评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,830评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,444评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,553评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,618评论 2 249

推荐阅读更多精彩内容