这里说的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
选择文件的路径
- 如果选择来多个文件，这个值表示第一个被选择的文件的路径，如果需要获取其他的路径可以打印一下input这个元素的FileList属性
- 如果没有选择文件，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>
