js触发input的打开文件选择器，将本地图片回显以及上传

js触发input的打开文件选择器，将本地图片回显以及上传

你可以通过以下 JavaScript 代码触发文件选择器：这里的场景不是通过input标签来触达的文件选择器，这样对于样式较为复杂的上传可以在html结构上保持清爽愉快，不用多添加一个input标签。

选择文件

  • 示例demo，理解思路
// 创建一个input元素
var input = document.createElement('input');
// 设置input类型为file，表示文件选择器
input.type = 'file';
// 添加change事件监听器，当用户选择文件后触发
input.addEventListener('change', function (event) {
  // 获取选择的文件
  var selectedFile = event.target.files[0];
  // 在这里你可以处理选择的文件，比如读取内容或上传到服务器等
  console.log('选择的文件:', selectedFile);
});
// 触发文件选择器
input.click();

这里的file，可以将一切媒体的类型的文件可以上传，但是有些场景只是上传图片，如何通过简单的方法实现呢？

input.accept 是用于指定文件选择器接受的文件类型的属性。通过设置 accept 属性，你可以限制用户只能选择特定类型的文件。这在需要特定类型文件的应用场景中很有用，例如只允许选择图像文件或文档文件。

实例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>File Input Example</title>
</head>
<body>

  <label for="fileInput">选择图像文件：</label>
  <input type="file" id="fileInput" accept="image/*">

  <script>
    // 添加change事件监听器，当用户选择文件后触发
    document.getElementById('fileInput').addEventListener('change', function (event) {
      // 获取选择的文件
      var selectedFile = event.target.files[0];
  
      // 在这里你可以处理选择的文件，比如读取内容或上传到服务器等
      console.log('选择的文件:', selectedFile);
    });
  </script>

</body>
</html>

在上述示例中，文件选择器只允许选择图像文件，因为 accept 属性设置为 image/*。你可以根据需要更改 accept 属性的值来限制文件类型。

  • ok，那么这里的 accept 属性，我们只需要放在js代码中开始即可。例如只需要筛选图片，其实的文件被筛选掉。
const fileInput = document.createElement('input');  
fileInput.type = 'file';  
fileInput.accept = 'image/gif,image/jpeg,image/jpg,image/png'; 
fileInput.click(); 

//or 
fileInput.accept = 'image/*'
//但是大批量筛选会延时打开文件选择器弹窗的速度，所以只需要指定格式的即可

显示文件

在前端，input 标签的文件选择器在用户选择文件后会触发change事件。你可以通过监听这个事件来获取用户选择的文件。当用户在文件选择框中选择一个文件并确认选择时，change 事件将被触发。

fileInput.addEventListener("change",()=>{
        // console.dir(fileInput);
        const windowURL = window.URL || window.webkitURL; // 兼容操作
        let fileObj = fileInput.files[0];
        let url = windowURL.createObjectURL(fileObj);
        this.$refs['photo1'].src=url;
        //等待dom图片加载完毕，即可释放资源。
        this.$nextTick(()=>{
          URL.revokeObjectURL(url);
        })
      })
    },

上传

格式为表单上传。

// 上传图片封装axios函数
export const POST_ADDPIC = (data)=>{
  return http.post(API.ADDPIC,data,{
    headers: {
      'Content-Type': 'multipart/form-data'
    },
  });
}
//使用
const form = new FormData()
form.append('data', file);//let file = fileInput.files[0];
form.append('id',id);
POST_ADDPIC(form)
  .then((res)=>{
    //TODO
  })
  .catch((err)=>{
    //TODO
  });