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

川长思鸟来 2021-06-26 16:06 454阅读 0赞

以HTML5的文件上传API

如下demo代码在`.html`文件打开即可：

<!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>

![在这里插入图片描述][20181123153430382.png]

## 一、`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

## 二、样式美化 ##

请看博客：[css input\[type=file\] 样式美化，input上传按钮美化][css input_type_file_ _input]

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

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

[20181123153430382.png]: /images/20210626/20991a9abe3a4e3b963596c872f5571c.png
[css input_type_file_ _input]: https://www.haorooms.com/post/css_input_uploadmh