点击input文件上传判断只可以上传图片的js代码

要实现点击input按钮上传图片,并判断只能上传图片文件,可以这样写JS代码:

html
<input type="file" id="fileUpload" accept="image/*">
<button id="uploadButton">上传</button>

js
const uploadButton = document.getElementById('uploadButton');
const fileUpload = document.getElementById('fileUpload');

uploadButton.addEventListener('click', () => {
  const files = fileUpload.files;
  if (files.length > 0) {
    const file = files[0];
    // 校验文件类型
    const imageTypes = ['image/jpeg', 'image/png', 'image/gif'];
    if (imageTypes.indexOf(file.type) === -1) {
      alert('文件必须为图片格式!');
      return;
    }
    // 上传文件逻辑
  }
}); 
  
fileUpload.addEventListener('change', () => {
  uploadButton.click();
});

这个例子做了以下工作:

1. 获取上传按钮和文件选择框元素

2. 给上传按钮添加点击事件,在事件中获取选中的文件

3. 检查文件类型是否为图片格式(jpeg、png、gif),如果不是则alert提示错误

4. 如果是图片格式,则可以执行后续上传文件逻辑

5. 给文件选择框添加change事件,当选中文件后自动点击上传按钮,触发上传逻辑

6. 通过file.type可以获取文件MIME类型,用于判断上传文件格式

7. accept=”image/*”属性可以在选择文件对话框中,只显示图片文件可选

所以,这段代码实现了选择图片文件后自动上传,并做了文件格式判断,只允许上传图片格式的文件。