xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

input support upload excel only

demo

https://codepen.io/xgqfrms/pen/vYONpLB

<!-- <input
  placeholder="Excel Only"
  type="file"
  id="fileElem"
  multiple
  accept=".xlsx, .xls, .csv"
  style="display:none"
/>
 -->
<input
  placeholder="Excel Only"
  type="file"
  id="fileElem"
  multiple
  accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
  style="display:none"
/>
<button id="fileSelect">can only select Excel files</button>

// https://stackoverflow.com/questions/11832930/html-input-file-accept-attribute-file-type-csv

const log = console.log;

const file = document.querySelector(`[id="fileElem"]`);

file.addEventListener(`change`, () => {
  const blob = file.files[0];
  const {
    name,
    type,
    size,
  } = blob;
  log(`blob`, blob);
  // type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
  // if (!name.includes(`.xls`) || !name.includes(`.csv`)) {
  //   this.$message({
  //     message: `not excel!`,
  //     type: 'error'
  //   });
  // } else {
  //   this.previewFile(box);
  // }
}, false);


const fileSelect = document.getElementById("fileSelect");

fileSelect.addEventListener("click", function (e) {
  if (fileElem) {
    fileElem.click();
  }
}, false);

---

upload file js only open sepicial file type

https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications

accept

指定 input 可以上传的文件类型（是否可选择）

accept, 接受上传的文件类型

https://element.eleme.io/#/zh-CN/component/upload

---