zoukankan      html  css  js  c++  java
  • 上传文件 change事件只执行一次的问题

    参考地址:https://blog.csdn.net/john_xiaoweige/article/details/81392110

    本节中的注意点:

    this.$refs.attenceInput.click();
    点击a按钮,相当于点击了按钮B本身哦!
    
    input type=”file“ change事件只执行一次的问题
    HTML:<input id="file", type="file" onchange="upload()" ref="referenceUpload" />
    回调成功方法里:this.$refs.referenceUpload.value = null;
    否者成功后不能够进行二次导入哈!
    
    <template>
    <div class="upload-panel">
       <div class="panel-heading">考勤导入</div>
       <div class="panel-body">
          <p><strong>注意事项:</strong><br>1、导入文件格式:.xls,.xlsx<br>2、文件命名规则“年月名”,如:“201705运维部考勤”></a></p>
          <p style="margin-top:10px;"><strong>考勤导入:</strong><a class="btn btn-primary btn-xs " @click="chooseFile">选择文件</a></p>
          <p>已选择文件:<em style="color:red; font-style:normal;">{{attence}}</em></p><p>{{info}}</p>
          <input type="file" style="display:none" name="attence"  @change="changeFile($event)" ref="attenceInput" />
       </div>
       <div class="panel-footer">
          <a class="btn btn-primary btn-md" @click="upFile">确认导入</a>
       </div>
    </div>
    </template>
    <script>
       export default {
         name: 'Upload',
         data () {
           return {
             attence: '',
             attenceFile: {}
           }
         },
         methods: {
           chooseFile () {
             this.$refs.attenceInput.click();
           },
           changeFile (e) {
             this.attence = e.target.files[0].name;
             this.attenceFile = e.target.files[0];
           },
           upFile () {
             let filename = this.attenceFile.name;
             let arr = filename.split('.');//这里这样还有点问题  如果别人是2010.23.34.xls这样的命名会出问题的
             if (arr[1] !== 'xls' && arr[1] !== 'xlsx') {
               alter('文件格式错误!');
               return;
             }
             let fileData = new window.FormData();
             fileData.append('file', this.attenceFile);//file参数名。this.attenceFile是参数内容
             // fileData.append('参数key', '内容value');
             let xhr = new window.XMLHttpRequest();
             xhr.open('POST', 'http://localhost:999/base/upload', true);
             xhr.send(fileData);
             xhr.onreadystatechange = () => {
              if (xhr.readyState === 4) {
              if (xhr.status === 200) {
              let response = JSON.parse(xhr.response)
                 console.log(response )    
                 this.$refs.attenceInput.value = "";//这样才可以进行二次导入
             } else {
                 //导入失败的情况
                 this.$refs.attenceInput.value = "";//这样才可以进行二次导入
            }
           }
         }
           }
         }
       }
    </script>
    
  • 相关阅读:
    远程连接Mysql报错 java.sql.SQLException:null,message from server ... is not allowed to connect
    使用 java.util.Properties 读取配置文件中的参数
    重载Prometheus配置
    Redis的 SLAVEOF 命令
    Redis为什么不能使用一主一从哨兵
    iptables添加开放端口
    解决172.17 或者172.18 机房环境下harbor服务器不通的问题
    利用sshpass批量导入ssh-key
    ZABBIX_PROXy
    zabbix_server.conf
  • 原文地址:https://www.cnblogs.com/IwishIcould/p/12312383.html
Copyright © 2011-2022 走看看