>source

파일 업로드 시 취소 누르기를 처리하고 싶습니다.

여기에서 순수 JavaScript를 사용하여 구현된 몇 가지 예를 살펴보았습니다. 예시

이 모든 예제는 잘 작동합니다. Vue JS를 사용하여 이 예제를 구현하려고 했지만 제대로 작동하지 않습니다.

<div>   <label for="upload" @click="initialize">Upload File</label>   <input type="file" id="upload" ref="theFile" hidden /></div><script>export default {
  methods: {
    initialize() {
      document.body.onfocus= this.checkIt;
      alert("initializing");
    },
    checkIt() {
      if (this.$refs.theFile.value.length) alert("Files Loaded");
      else alert("Cancel clicked");
      document.body.onfocus= null;
      alert("checked");
    },
  },
};
</script>

다음의 예를 볼 수 있습니다. code샌드박스의 내 code

Protip: 경고 이외의 것을 사용하십시오. 그들은 피해야합니다.

isherwood2022-02-05 03:00:13
  • 답변 # 1

    댓글에서 언급했듯이 취소를 캡처하는 이벤트가 없으며 제출 버튼만 추가하는 것이 좋습니다.

    다음 'mouseenter' 이벤트가 본문에서 실행될 때 파일이 업로드되었는지 알려줍니다. 취소 버튼을 눌렀는지 여부는 알려주지 않습니다.

    <template>  <form>    <label for="upload">Upload File</label>    <input
          @click="onShowFileUpload"
          @change="onFileUpload"
          type="file"
          id="upload"
          ref="theFile"
          hidden
        />  </form></template><script>export default {
      methods: {
        onShowFileUpload() {
          this.$refs.theFile.value= "";
          const onHandleMouseEnter= ()=> {
            if (this.$refs.theFile.value.length=== 0) {
              console.log("No files loaded");
            }
            document.body.removeEventListener("mouseenter", onHandleMouseEnter);
          };
          document.body.addEventListener("mouseenter", onHandleMouseEnter);
        },
        onFileUpload(event) {
          console.log("Files Uploaded");
        },
      },
    };
    </script><style>html,
    body {
      height: 100%;
      height: 100%;
    }
    label {
      font-family: sans-serif;
      font-size: 20px;
      border: 1px solid tomato;
      padding: 7px 15px;
      cursor: pointer;
    }
    </style>

    이것은 키보드 탐색이 사용된 일부 경우에 작동하지 않을 수 있습니다. 요점은 해야 할 일이 있는 경우 이와 같은 해킹에 의존하지 마십시오. 그러면 문제에 잘못된 방식으로 접근할 수 있습니다. 그렇지 않다면 괜찮습니다.

    doesnotmatter2022-02-04 03:26:17

    맞습니다. 오늘 강조 표시한 이 문제를 발견했습니다.

    Synchro2022-02-04 07:29:12
  • 이전 git bash를 설정하는 방법은 무엇입니까? 어느 위치에서나 사용할 수 있도록
  • 다음 ceph : 최신이며 FreeBSD와 Linux 모두에서 잘 실행되는 클러스터 파일 시스템(파일 저장소) 검색