使用代碼的文件上傳最大尺寸事件到簡單的代碼

Question

我是新來的jquery/JavaScript現在我有一個窗體中，用戶可以上傳多個文件工作得很好，但我需要做的改變這是工作碼。

$('#userFiles').change(function() { 
    var combinedSize = 0; 
    for (var i = 0; i < this.files.length; i++) { 
    combinedSize += (this.files[i].size || this.files[i].fileSize); 
    } 
    if (combinedSize > 104857600) { 
    toastr["error"]("Max upload size is 100MB"); 
    } 
}); 

HTML

<input type="file" class="form-control" id="userFiles" name="userFiles[]" multiple/> 

現在我想要做的就是提交檢查之前whther集體的文件大小超過100，如果是，那麼從提交停止形態，並顯示一個錯誤，你不能現在上傳超過100MB這是更新的代碼。

$("form").on("submit", function(e) { 
    e.preventDefault(); 

    $('#userFiles').change(function() { 
    var combinedSize = 0; 
    for (var i = 0; i < this.files.length; i++) { 
     combinedSize += (this.files[i].size || this.files[i].fileSize); 
    } 
    if (combinedSize > 104857600) { 
     toastr["error"]("Max upload size is 100MB"); 
    } 
    }); 
}); 

我的問題是，使用此功能，因爲它是輸入變化的事件，當涉及到表單提交我不能使用其他事件裏面我想的邏輯只在形式提交工作如何我使用userFile id屬性替換這個？我嘗試了幾種方法，但它不工作。

Answer 1

function validateMaxFileSize() { 
 
    //get the files off of the element 
 
    var files = $('#userFiles').prop('files'); 
 
    var combinedSize = 0; 
 

 
    for (var i = 0; i < files.length; i++) { 
 
    combinedSize += (files[i].size || files[i].fileSize); 
 
    } 
 
    //return true if the max is exceeded 
 
    return (combinedSize > 104857600); 
 
} 
 

 
$('#userFiles').change(function() { 
 
    //if the max is exceeded, show toaster 
 
    if (validateMaxFileSize()) { 
 
    toastr["error"]("Max upload size is 100MB"); 
 
    } 
 
}); 
 

 
$("form").on("submit", function(e) { 
 
    //if the max is exceeded, cancel the submit 
 
    if (validateMaxFileSize()) { 
 
    e.preventDefault(); 
 
    toastr["error"]("Max upload size is 100MB"); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="file" class="form-control" id="userFiles" name="userFiles[]" multiple/>

Answer 2

如果我理解正確的話，你可以使用全局變量來做到這一點。例如

var combinedSize = 0; 

$('#userFiles').change(function() { 
    combinedSize = 0; 
    for (var i = 0; i < this.files.length; i++) { 
     combinedSize += (this.files[i].size || this.files[i].fileSize); 
    } 

    }); 

$("form").on("submit", function(e) { 


    if (combinedSize > 104857600){ 
    e.preventDefault(); 
    toastr["error"]("Max upload size is 100MB"); 
    } 

}); 

請記住，這只是客戶端驗證，它是不夠的！如果用戶瀏覽器禁用JavaScript，會發生什麼情況？該表格仍然會提交併且文件將會通過。您需要執行服務器端驗證，以確保它們不超過文件限制。您可以在配置文件中設置最大文件請求大小的值。如果你有一個asp.net應用程序，你可以使用web.config。您也可以在服務器代碼中檢查文件大小是否很大並返回驗證消息。