表单一次上传了一个文件，但是当我再次上传同一文件时，它不适用于同一文件

Question

我可以从下面的表单中上传文件，然后从文件选择器中选择一个文件。 但是问题是当我尝试再次使用同一文件提交表单时，它什么也没做。

我从文件选择器中选择一个文件，然后上传。 我再次选择了相同的文件，因此无法再次上传。 但是，如果在尝试其他文件后上传文件，则可以再次上传同一文件。

以下代码有什么问题。

我为脚本添加了jquery，为表单添加了html。 我真的不明白他们出了什么问题。

 $(document).ready(function() { $("#datauploadbtn").on('click', function() { $('#datafile').trigger('click'); }); $('#datafile').change(function(e) { //var reg=/(.txt)$/; //if (!reg.test($("#myFile").val())) { // alert('Only .txt file extension allowed!'); // return false; //} else { $("#datafiletxt").val($("#datafile").val()); if ($("#datafiletxt").val() == '') { alert('Select a file to upload'); return false; } else { $('#dataform').submit(); e.preventDefault(); } }); }); $(function() { var bar = $('.barTest'); var percent = $('.percentTest'); var status = $('#statusTest'); $('#dataform').ajaxForm({ success: function(data) { console.log(data); $('#percentTest').css('visibility', 'hidden'); $('#percentTest').css('color', ' white'); $('#barTest').css('background-color', 'white'); $('#statusTest').css('color', 'white'); $('#progressTest').css('border', '1px solid white'); $('#percentSpan').css('visibility', 'hidden'); $('#statusSpan').css('visibility', 'hidden'); //status.empty(); alert('Successfully uploaded!'); }, beforeSend: function() { $('#percentTest').css('visibility', 'visible'); $('#percentTest').css('color', ' black'); $('#barTest').css('background-color', '#B4F5B4'); $('#statusTest').css('color', 'orange'); $('#progressTest').css('border', '1px solid #ddd'); $('#percentSpan').css('visibility', 'visible'); $('#statusSpan').css('visibility', 'visible'); var percentVal = '0%'; bar.width(percentVal) percent.html(percentVal); }, uploadProgress: function(event, position, total, percentComplete) { var percentVal = percentComplete + '%'; bar.width(percentVal) percent.html(percentVal); console.log(percentVal); } }); })(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <form action="ajaxasync" enctype="multipart/form-data" method="post" name="dataform" id="dataform"> <input type="button" value="Data file" id="datauploadbtn" name="datauploadbtn" style="width:100px; font:12px 'Arial'; font-weight:bold; height:30px; background:lightblue;" /> <input type="text" id="datafiletxt" style="width:260px; font:12px 'Arial'; font-weight:bold; height:27px;" /> <input type="file" name="datafile" id="datafile" style="visibility:hidden;" /> </form> <div id="progressTest" class="progressTest"> <div id="barTest" class="barTest"></div > <div id="percentTest" class="percentTest" style="visibility:hidden;"></div> </div> <div id="statusTest" style="font:11px 'Arial'; color: orange;"> <span id="statusSpan" style="visibility:hidden;"> File uploading in progress... <br> Please wait! </span> </div> 

Answer 1

您当前正在使用ON CHANGE事件。 如果选择相同的文件，该值仍将保持不变。 因此，这意味着一旦从on change事件中获取值，就需要将值更改为空

$(document).ready(function() {
  $("#datauploadbtn").on('click', function() {
    $('#datafile').trigger('click');
  });

  $('#datafile').change(function(e) {
    //var reg=/(.txt)$/;
    //if (!reg.test($("#myFile").val())) {
    //  alert('Only .txt file extension allowed!');
    //    return false;
    //} else {
    $("#datafiletxt").val($("#datafile").val());
    if ($("#datafiletxt").val() == '') {
      alert('Select a file to upload');
      return false;
    } else {
      $('#dataform').submit();
      e.preventDefault();
    }






    $("#datafile").val("");//this is the changd!!!





  });


});

我评论了您需要插入的代码

Answer 2

通过ajax上传文件时，输入值和文件仍在表单上，​​您必须清除表单$('#dataform')[0].reset(); 或清除输入$("#datafiletxt").val(""); 触发上传按钮。