Question

我可以从下面的表单上传文件，从文件选择器中选择一个文件。但问题是，当我尝试再次使用相同的文件提交表单时，它没有做任何事情。

我从文件选择器中选择一个文件，上传它。我再次选择相同的文件，然后我无法再次上传。但是如果我在尝试不同的文件后上传文件，那么我可以再次上传相同的文件。

以下代码有什么问题。

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

＆＃13;

$(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);
    }
  });
})();

＆＃13;

<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>

＆＃13;

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("");的值。

表单上传文件一次，但当我再次上传同一文件时，它不会对同一文件起作用

2 个答案: