利用input上传图片以及文件视频音频等

这里说的input指的就是我们常用的<input/>标签，那么我们如何利用这个标签来处理文件上传呢？
其实当我们的<input> type 类型为 file 的的时候，就可以进行了 。 即 <input type="file"/>
加上这个标签之后就可以看到一个选择文件的按钮了。

常用的相关属性

accept：决定上传文件可以有哪些类型，如果写来相应接收的文件，也就只能看到这些类型的文件来（文件类型不一定就正好是后缀名，这是一个小坑）
图片类型文件

<input type=“file” accept=“image/png,image/gif,image/jpg”> //只支持png gif ipg这3种类型的图片
<input type=“file” accept=“image/*”> //接受任何格式的图片文

文档文件

<input type=“file” accept=".doc, .docx, .xml"> //只支持doc docx xml这3种类型的文档
<input type=“file”
accept=".doc, .docx, .xml, application/msword,
application/vnd.openxmlformats-officedocument.wordprocessingml.document"> //支持所有dMS Doc 文件类型

multiple：决定是否支持一次上传多个文件

<input type=“file” id=“file” name=“file” multiple> //加上multiple属性之后，支持一次选择多个文件

required： 决定

上传文件所触发的事件

change

input 的 value

选择文件的路径

1. 如果选择来多个文件，这个值表示第一个被选择的文件的路径，如果需要获取其他的路径可以打印一下input这个元素的FileList属性
2. 如果没有选择文件，value为空

获取所选择文件的相关信息（el.files）

打印这个input.files，我们可以得到一个对象包含信息如下：
name： 文件名
lastModifiedDate： 文件最后修改的时间
size：文件字节大小

8bit(位)=1Byte(字节)
1024Byte(字节)=1KB
1024KB=1MB
1024MB=1GB
1024GB=1TB

type： 所选文件的类型

上传文件案例

// -----------------------------------  HTML -------------------------------------
<div>
     <label for="image_uploads">上传图片 (支持:png, jpeg, jpg格式)</label><br />
     <input type="file" id="image_uploads" name="image_uploads" accept=".jpg, .jpeg, .png" multiple>
</div>
<div class="preview">
</div>

// --------------------------------- JS ------------------------------------------------------
<script>
        // 获取 input 元素
        var input = document.querySelector('input');
        // 获取 preview 元素
        var preview = document.querySelector('.preview');


        //监听 input 的 change 事件, 并且在事件发生的时候调用 updateImageDisplay 方法. 
        input.addEventListener('change', upload);

        function upload() {

            var curFiles = input.files;
            //根据files中的长度来判断是否有选择文件，如果没有通知用户；如果有，则预览选择的文件
            if (curFiles.length === 0) {
                var para = document.createElement('p');
                para.textContent = 'No files currently selected for upload';
                preview.appendChild(para);
            } else {
                var list = document.createElement('ol');
                preview.appendChild(list);
                for (var i = 0; i < curFiles.length; i++) {
                    var listItem = document.createElement('li');
                    var image = document.createElement('img');
                    image.src = window.URL.createObjectURL(curFiles[i]);
                    listItem.appendChild(image);
                    list.appendChild(listItem);
                }
            }
        }
    </script>