Asp.Net Kiểm tra kích thước tệp trước khi tải lên

Question

Tôi muốn kiểm tra kích thước tệp đã chọn TRƯỚC KHI tải lên tệp có thành phần tệp tải lên asp. Tôi không thể sử dụng activex vì giải pháp phải hoạt động trên mỗi trình duyệt (firefox, Chrome, v.v.)

Làm cách nào để thực hiện điều đó?

Cám ơn câu trả lời của bạn ..

Answer 1

ASPX

<asp:CustomValidator ID="customValidatorUpload" runat="server" ErrorMessage="" ControlToValidate="fileUpload" ClientValidationFunction="setUploadButtonState();" /> 
<asp:Button ID="button_fileUpload" runat="server" Text="Upload File" OnClick="button_fileUpload_Click" Enabled="false" /> 
<asp:Label ID="lbl_uploadMessage" runat="server" Text="" /> 

jQuery

function setUploadButtonState() { 

    var maxFileSize = 4194304; // 4MB -> 4 * 1024 * 1024 
    var fileUpload = $('#fileUpload'); 

    if (fileUpload.val() == '') { 
    return false; 
    } 
    else { 
     if (fileUpload[0].files[0].size < maxFileSize) { 
     $('#button_fileUpload').prop('disabled', false); 
     return true; 
     }else{ 
     $('#lbl_uploadMessage').text('File too big !') 
     return false; 
     } 
    } 
} 

Answer 2

Tôi nghĩ rằng đó là khả năng sử dụng javascript trông here

Answer 3

Tôi nghĩ rằng bạn không thể làm điều đó. Câu hỏi của bạn tương tự như câu hỏi này: Obtain filesize without using FileSystemObject in JavaScript

Vấn đề là ASP.NET là ngôn ngữ phía máy chủ nên bạn không thể làm gì cho đến khi bạn có tệp trên máy chủ.

Vì vậy, những gì còn lại là mã phía máy khách (javascript, applet java, flash?) ... Nhưng bạn không thể trong javascript thuần túy và các giải pháp khác không phải lúc nào cũng là "trình duyệt di động" hoặc không có bất kỳ hạn chế nào

Answer 4

Tôi đang ở cùng một thuyền và tìm thấy giải pháp làm việc NẾU tệp tải lên dự kiến ​​của bạn là hình ảnh. Trong ngắn hạn tôi cập nhật ASP.NET FileUpload kiểm soát để gọi một chức năng javascript để hiển thị một hình thu nhỏ của các tập tin được lựa chọn, và sau đó trước khi gọi nộp mẫu sau đó kiểm tra hình ảnh để kiểm tra kích thước tập tin. Đủ nói chuyện, chúng ta hãy lấy mã.

Javascript, bao gồm trong phần đầu trang

function ShowThumbnail() { 
    var aspFileUpload = document.getElementById("FileUpload1"); 
    var errorLabel = document.getElementById("ErrorLabel"); 
    var img = document.getElementById("imgUploadThumbnail"); 

    var fileName = aspFileUpload.value; 
    var ext = fileName.substr(fileName.lastIndexOf('.') + 1).toLowerCase(); 
    if (ext == "jpeg" || ext == "jpg" || ext == "png") { 
     img.src = fileName; 
    } 
    else { 
     img.src = "../Images/blank.gif"; 
     errorLabel.innerHTML = "Invalid image file, must select a *.jpeg, *.jpg, or *.png file."; 
    } 
    img.focus(); 
} 

function CheckImageSize() { 
    var aspFileUpload = document.getElementById("FileUpload1"); 
    var errorLabel = document.getElementById("ErrorLabel"); 
    var img = document.getElementById("imgUploadThumbnail"); 

    var fileName = aspFileUpload.value; 
    var ext = fileName.substr(fileName.lastIndexOf('.') + 1).toLowerCase(); 
    if (!(ext == "jpeg" || ext == "jpg" || ext == "png")) { 
     errorLabel.innerHTML = "Invalid image file, must select a *.jpeg, *.jpg, or *.png file."; 
     return false; 
    } 
    if (img.fileSize == -1) { 
     errorLabel.innerHTML = "Couldn't load image file size. Please try to save again."; 
     return false; 
    } 
    else if (img.fileSize <= 3145728) { 
     errorLabel.innerHTML = ""; 
     return true; 
    } 
    else { 
     var fileSize = (img.fileSize/1048576); 
     errorLabel.innerHTML = "File is too large, must select file under 3 Mb. File Size: " + fileSize.toFixed(1) + " Mb"; 
     return false; 
    } 
} 

Các CheckImageSize đang tìm kiếm một tập tin nhỏ hơn 3 Mb (3.145.728), cập nhật này để bất kỳ giá trị mà bạn cần.

ASP HTML Mã

<!-- Insert into existing ASP page --> 
<div style="float: right; width: 100px; height: 100px;"><img id="imgUploadThumbnail" alt="Uploaded Thumbnail" src="../Images/blank.gif" style="width: 100px; height: 100px" /></div> 
<asp:FileUpload ID="FileUpload1" runat="server" onchange="Javascript: ShowThumbnail();"/> 
<br /> 
<asp:Label ID="ErrorLabel" runat="server" Text=""></asp:Label> 
<br /> 

<asp:Button ID="SaveButton" runat="server" Text="Save" OnClick="SaveButton_Click" Width="70px" OnClientClick="Javascript: return CheckImageSize()" /> 

Lưu ý trình duyệt không mất một giây để cập nhật trang với hình thu nhỏ và nếu người dùng có thể nhấp vào Save trước hình ảnh được nạp nó sẽ nhận được một - 1 cho kích thước tệp và hiển thị lỗi để nhấp lại vào lưu. Nếu bạn không muốn hiển thị hình ảnh bạn có thể làm cho điều khiển hình ảnh vô hình và điều này sẽ làm việc. Bạn cũng sẽ cần phải có một bản sao của blank.gif để trang không tải với một liên kết hình ảnh bị hỏng.

Hy vọng bạn sẽ nhanh chóng và dễ dàng bỏ qua và hữu ích. Tôi không chắc liệu có một điều khiển HTML tương tự có thể được sử dụng cho các tệp chung chung hay không.

Answer 5

Bạn có thể làm điều đó bằng cách sử dụng javascript.

Ví dụ:

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-type" content="text/html;charset=UTF-8"> 
<title>Show File Data</title> 
<style type='text/css'> 
body { 
    font-family: sans-serif; 
} 
</style> 
<script type='text/javascript'> 
function showFileSize() { 
    var input, file; 

    if (typeof window.FileReader !== 'function') { 
     bodyAppend("p", "The file API isn't supported on this browser yet."); 
     return; 
    } 

    input = document.getElementById('fileinput'); 
    if (!input) { 
     bodyAppend("p", "Um, couldn't find the fileinput element."); 
    } 
    else if (!input.files) { 
     bodyAppend("p", "This browser doesn't seem to support the `files` property of file inputs."); 
    } 
    else if (!input.files[0]) { 
     bodyAppend("p", "Please select a file before clicking 'Load'"); 
    } 
    else { 
     file = input.files[0]; 
     bodyAppend("p", "File " + file.name + " is " + file.size + " bytes in size"); 
    } 
} 

function bodyAppend(tagName, innerHTML) { 
    var elm; 

    elm = document.createElement(tagName); 
    elm.innerHTML = innerHTML; 
    document.body.appendChild(elm); 
} 
</script> 
</head> 
<body> 
<form action='#' onsubmit="return false;"> 
<input type='file' id='fileinput'> 
<input type='button' id='btnLoad' value='Load' onclick='showFileSize();'> 
</form> 
</body> 
</html> 

Answer 6

Tại sao không sử dụng RegularExpressionValidator cho loại tập tin xác nhận. biểu hiện thường xuyên cho loại tập tin xác nhận là:

ValidationExpression="^(([a-zA-Z]:)|(\\{2}\w+)\$?)(\\(\w[\w].*))+(.jpg|.jpeg|.gif|.png)$" 

Answer 7

Ở đây tôi đến tiết kiệm trong ngày! xin lỗi tôi trễ 3 năm nhưng, hãy để tôi trấn an mọi người rằng điều này là hoàn toàn có thể và không khó thực hiện! Bạn chỉ cần xuất tệp tin của tệp đang được tải lên một điều khiển có thể được xác thực.Bạn có thể làm điều này với javascript, thao tác này sẽ không yêu cầu đăng lại xấu, như thể bạn đã sử dụng

FileBytes.Length 

bạn sẽ gặp phải một postback sau khi người dùng cuối đã chọn hình ảnh. (I.E. sử dụng onchange = "file1_onchange (this);" để thực hiện điều này.). Cho dù cách nào bạn chọn để xuất các tập tin là tùy thuộc vào bạn các nhà phát triển.

Sau khi bạn đã thu thập dữ liệu, sau đó chỉ cần xuất nó vào điều khiển ASP có thể được xác thực. (IE. một hộp văn bản), sau đó bạn có thể sử dụng một biểu thức chính quy cho một phạm vi để xác nhận cho các tập tin của bạn.

<asp:RegularExpressionValidator ID="RegularExpressionValidator1" ValidationExpression="^([1-9][0-9]{0,5}|[12][0-9]{6}|3(0[0-9]{5}|1([0-3][0-9]{4}|4([0-4][0-9]{3}|5([0-6][0-9]{2}|7([01][0-9]|2[0-8]))))))$" ErrorMessage="File is too large, must select file under 3 Mb." ControlToValidate="Textbox1" runat="server"></asp:RegularExpressionValidator> 

Boom! nó là dễ dàng. Chỉ cần đảm bảo sử dụng Visibility=Hidden trên điều khiển ASP của bạn để được xác thực chứ không phải Display=None vì Display=none sẽ xuất hiện trên trang một chút (mặc dù bạn vẫn có thể tương tác với trang đó qua dom). Và Visibility=Hidden không hiển thị, nhưng không gian được phân bổ cho nó trên trang.

hãy kiểm tra: http://utilitymill.com/utility/Regex_For_Range cho tất cả các yêu cầu phạm vi regex của bạn!

Answer 8

Tôi khuyên bạn nên sử dụng plugin Tải lên tệp/addon cho jQuery. Bạn cần jQuery chỉ yêu cầu javascript và plugin này: http://blueimp.github.io/jQuery-File-Upload/

Đó là một công cụ mạnh mẽ có xác nhận hình ảnh, kích thước và hầu hết những gì bạn cần. Bạn cũng nên có một số xác thực phía máy chủ và phía máy khách có thể bị giả mạo. Cũng chỉ kiểm tra hồ sơ gia hạn là không đủ tốt vì nó có thể được easly giả mạo, đã xem bài viết này: http://www.aaronstannard.com/post/2011/06/24/How-to-Securely-Verify-and-Validate-Image-Uploads-in-ASPNET-and-ASPNET-MVC.aspx

Answer 9

$(document).ready(function() { 

"use strict"; 

//This is the CssClass of the FileUpload control 
var fileUploadClass = ".attachmentFileUploader", 

    //this is the CssClass of my save button 
    saveButtonClass = ".saveButton", 

    //this is the CssClass of the label which displays a error if any 
    isTheFileSizeTooBigClass = ".isTheFileSizeTooBig"; 

/** 
* @desc This function checks to see what size of file the user is attempting to upload. 
* It will also display a error and disable/enable the "submit/save" button. 
*/ 
function checkFileSizeBeforeServerAttemptToUpload() { 

    //my max file size, more exact than 10240000 
    var maxFileSize = 10485760 // 10MB -> 10000 * 1024 

    //If the file upload does not exist, lets get outta this function 
    if ($(fileUploadClass).val() === "") { 

     //break out of this function because no FileUpload control was found 
     return false; 
    } 
    else { 

     if ($(fileUploadClass)[0].files[0].size <= maxFileSize) { 

      //no errors, hide the label that holds the error 
      $(isTheFileSizeTooBigClass).hide(); 

      //remove the disabled attribute and show the save button 
      $(saveButtonClass).removeAttr("disabled"); 
      $(saveButtonClass).attr("enabled", "enabled"); 

     } else { 

      //this sets the error message to a label on the page 
      $(isTheFileSizeTooBigClass).text("Please upload a file less than 10MB."); 

      //file size error, show the label that holds the error 
      $(isTheFileSizeTooBigClass).show(); 

      //remove the enabled attribute and disable the save button 
      $(saveButtonClass).removeAttr("enabled"); 
      $(saveButtonClass).attr("disabled", "disabled"); 
     } 
    } 
} 

//When the file upload control changes, lets execute the function that checks the file size. 
$(fileUploadClass).change(function() { 

    //call our function 
    checkFileSizeBeforeServerAttemptToUpload(); 

}); 

}); 

đừng quên bạn có thể cần phải thay đổi web.config để giới hạn tải lên của các kích thước nhất định cũng như vì mặc định là 4MB https://msdn.microsoft.com/en-us/library/e1f13641%28v=vs.85%29.aspx

<httpRuntime targetFramework="4.5" maxRequestLength="11264" /> 

Answer 10

Để xác nhận nhiều file với jQuery + asp:CustomValidator một kích thước lên đến 10MB

jQuery:

function upload(sender, args) { 
    arguments.IsValid = true; 
    var maxFileSize = 10 * 1024 * 1024; // 10MB 
    var CurrentSize = 0; 
    var fileUpload = $("[id$='fuUpload']"); 
    for (var i = 0; i < fileUpload[0].files.length; i++) { 
     CurrentSize = CurrentSize + fileUpload[0].files[i].size;    
    } 
    args.IsValid = CurrentSize < maxFileSize; 
} 

ASP:

<asp:FileUpload runat="server" AllowMultiple="true" ID="fuUpload" /> 
<asp:LinkButton runat="server" Text="Upload" OnClick="btnUpload_Click" 
     CausesValidation="true" ValidationGroup="vgFileUpload"></asp:LinkButton> 
<asp:CustomValidator ControlToValidate="fuUpload" ClientValidationFunction="upload" 
     runat="server" ErrorMessage="Error!" ValidationGroup="vgFileUpload"/>