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

时间 2019-11-13

标签 html5 html input file 上传以及类型控制栏目 HTML5 繁體版

原文原文链接

以HTML5的文件上传APIjavascript

以下demo代码在.html文件打开便可：php

!DOCTYPE html>
<html lang="zh_cn">
<head>
    <meta charset="UTF-8">
    <title>HTML5文件上传FileReader API</title>
</head>
<body>
<!--一个能上传多媒体文件的表单-->
<input type="file" id="upload-file" multiple /> 
<!--显示图片的地方-->
<div id="destination"></div>
<script>
    document.getElementById('upload-file').addEventListener('change', function() {        
        var file;
        var destination = document.getElementById('destination');
        destination.innerHTML = '';//每次清空内容
 
        // 循环用户多选的文件
        for(var x = 0, xlen = this.files.length; x < xlen; x++) {
            file = this.files[x];
            console.log(file);
            if(file.type.indexOf('image') != -1) { // 很是简单的交验，判断文件是不是图片
                var reader = new FileReader();//文件预览对象
                reader.readAsDataURL(file);//设置要预览的文件
                reader.onload = function(e) {//监听文件加载完成事件
                    var img = new Image();//创键预览图片
                    img.src = e.target.result; //把预览图片的src设置为e.target.result属性。返回预览文件的二进制内存数据
                    destination.appendChild(img);//在把每张图片，放到预览区域
                };
            }            
        }
    });
</script>
</body>
</html>

1、input:file属性

属性值有如下几个比较经常使用：css

accept：表示能够选择的文件MIME类型，多个MIME类型用英文逗号分开，经常使用的MIME类型见下表。html

multiple：是否能够选择多个文件，多个文件时其value值为第一个文件的虚拟路径。java

一、accept

只能选择png和gif图片ajax

<input id="fileId1" type="file" accept="image/png,image/gif" name="file" />

二、multiple

多选文件上传json

<input id="fileId2" type="file" multiple="multiple" name="file" />

三、经常使用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上传的时候，须要得到input:file选择的文件（可能为多个文件），获取其文件列表为：服务器

// input标签的files属性 document.querySelector("#fileId").files // 返回的是一个文件列表数组

得到的文件列表，而后遍历插入到表单数据当中。即：app

// 得到上传文件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 ) )

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

以防备忘，部分：http://www.haorooms.com/post/input_file_leixing

H5文件上传