表單上傳文件一次，但是當我再次上傳同一個文件時它不能在同一個文件上工作

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())) { 
 
    // \t 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"> 
 
\t <div id="barTest" class="barTest"></div > 
 
\t <div id="percentTest" class="percentTest" style="visibility:hidden;"></div> 
 
</div> 
 

 
<div id="statusTest" style="font:11px 'Arial'; color: orange;"> 
 
\t <span id="statusSpan" style="visibility:hidden;"> 
 
\t \t File uploading in progress... <br> 
 
\t \t Please wait! 
 
\t </span> 
 
</div>

Answer 1

您目前使用的是更改事件。如果您選擇相同的文件，該值仍將保持不變。所以這意味着你需要將該值更改爲空，一旦你抓住的價值構成上的變化事件

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