shly / Blog-New

学习笔记
0 stars 0 forks source link

input type='file'相关问题 #5

Open shly opened 6 years ago

shly commented 6 years ago

onchange事件处理上传文件之后点击的是确定还是取消按钮

      fileUpLoad(value) {
          var input = document.querySelector('input[type="file"]')
          if (input.files.length > 0) {
             // 确定按钮
          } else {
            // 取消按钮
          }
      }
shly commented 6 years ago

上传同一个文件不会触发onchange事件

解决: 删除文件后新建一个input节点替换之前节点,如

        let ele = document.createElement('input')
        ele.type = 'file'
        ele.className = 'file-input'
        ele.onchange = this.fileUpLoad
        document.querySelector('.upload-area').replaceChild(ele, input)
shly commented 6 years ago

在选择文件弹出框外部删除选中文件示例代码

         fileUpLoad(value) {
            var input = document.querySelector('input[type="file"]')
            if (input.files.length > 0) {
            var data = new FormData();
           data.append("file", input.files[0]);
         // 上传到服务器方法
    },
    deleteFile () {
      let input = document.querySelector('input[type="file"]')
      let ele = document.createElement('input')
      ele.type = 'file'
      ele.className = 'file-input'
      ele.onchange = this.fileUpLoad
      document.querySelector('.upload-area').replaceChild(ele, input)
      this.$emit("fileChange", '')
      this.$emit("urlChange", '')
      this.fileName = ''
    }