1. Trang chủ
  2. Câu hỏi và trả lời
  3. cách xác thực kích thước tệp bằng HTML và Javascript ở phía máy khách

cách xác thực kích thước tệp bằng HTML và Javascript ở phía máy khách

2009-12-02 37 views

Trả lời

13

CẬP NHẬT 2013 như các chỉnh sửa này, File API được hỗ trợ trong tất cả các trình duyệt chính, và trong IE như các phiên bản 10

http://caniuse.com/#search=file%20api

Bạn có thể vẫn muốn sử dụng SWFUpload nếu bạn vẫn cần hỗ trợ IE9 trở xuống, mặc dù vào thời điểm này, nó có thể là nhiều hơn dự phòng, vì tệp api html5 có hỗ trợ trên nền tảng di động nơi SWFUpload không thể tiếp cận. Tệp api html5 được dựa trên tệp api của firefox như được ghi chú bên dưới.

cũng Xem câu hỏi trùng lặp này Client Checking file size using HTML5?

UPDATE: Firefox đã thay đổi API của họ để này https://developer.mozilla.org/en/DOM/FileReader

Bạn có thể làm điều đó trong firefox như vậy

html:

<form action="" method="get" accept-charset="utf-8"> 
<input type="file" name="file" value="" id="file"> 
<p><input type="submit" value="Continue &rarr;"></p> 
</form>

javascript:

var filesize = document.forms[0].file.files[0].fileSize

nếu có một cách để làm điều này trong IE, tôi không biết điều đó. Nó có thể liên quan đến activeX hoặc một số rác khác.

chỉnh sửa: tôi thấy here này, cách làm việc này trong IE

<head> 
<script> 
function getSize() 
{ 
var myFSO = new ActiveXObject("Scripting.FileSystemObject"); 
var filepath = document.upload.file.value; 
var thefile = myFSO.getFile(filepath); 
var size = thefile.size; 
alert(size + " bytes"); 
} 
</script> 
</head> 
<body> 
<form name="upload"> 
<input type="file" name="file"> 
<input type="button" value="Size?" onClick="getSize();"> 
</form> 
</body> 
</html>

Nguồn

2009-12-02 12:02:19 Breton

+2

+1 Tôi không biết điều đó - đã xóa bài đăng của tôi. – Amarghosh

+0

+1 Trong khi đây là một cách tiếp cận tốt (sử dụng Javascript mà câu hỏi ban đầu là về), bạn thực sự chỉ cần thực hiện một giải pháp cho hai trình duyệt. Tất nhiên, đây là hai trong số các trình duyệt phổ biến nhất, nhưng nếu bạn cần hỗ trợ nhiều trình duyệt/nền tảng, nó có thể khá khó thực hiện. –

+4

Javascript không thể thay thế để kiểm tra kích thước tệp trên máy chủ. Nếu mục tiêu đơn giản là tiết kiệm một số tài nguyên, thì mục tiêu đó là có thể, tôi nghĩ vậy. – Breton

5

lẽ bạn có thể sử dụng SWFUpload thay vào đó, mà là một ứng dụng Flash nhỏ để xử lý các mặt hàng đã được upload xong cho bạn. Từ danh sách tính năng của họ:

  • tải nhiều file cùng một lúc bằng ctrl/shift-lựa chọn trong hộp thoại
  • Javascript callbacks trên tất cả các sự kiện
  • thông tin tập tin Nhận trước khi tải lên bắt đầu
  • yếu tố Phong cách upload với XHTML và css
  • Hiển thị thông tin trong khi các tệp đang tải lên bằng cách sử dụng HTML
  • Không cần tải lại trang cần thiết
  • Hoạt động trên tất cả các nền tảng/trình duyệt có hỗ trợ Flash.
  • làm giảm một cách duyên dáng mẫu upload HTML bình thường nếu Flash hoặc javascript không có sẵn
  • kiểm soát filesize trước khi tải lên bắt đầu
  • Chỉ hiển thị định dạng tập tin được lựa chọn trong hộp thoại
  • cập Queue, xóa/thêm các tập tin trước khi bắt đầu tải lên

Nguồn

2009-12-02 12:05:28

2

Tôi muốn kết hợp hai cách khác nhau để kiểm tra kích thước tệp ở phía máy khách bằng javascript. Tôi đã thử nghiệm nó trên FF/IE/Chrome và hoạt động tốt:

<script type="text/javascript"> 
    function checkBrowser() 
    { 
     if(navigator.appName == "WebTV") 
     { 
     alert("You're using the WebTV browser.") 
     } 
     if(navigator.appName == "Netscape") 
     { 
     checkFileSizeFF(); 
     } 
     if(navigator.appName == "Microsoft Internet Explorer") 
     { 
     checkFileSizeIE(); 
     } 
    } 
    function checkFileSizeFF() 
    { 
     var filesize = document.forms[0].file.files[0].fileSize; 
     alert(filesize/(1024*1024) + " MB"); 
    } 
    function checkFileSizeIE() 
    { 
    var myFSO = new ActiveXObject("Scripting.FileSystemObject"); 
    var filepath = document.upload.file.value; 
    var thefile = myFSO.getFile(filepath); 
    var size = thefile.size/(1024*1024); 
    alert(size + "MB"); 
    } 
    </script> 

    <form action="" method="get" accept-charset="utf-8" name="upload"> 
    <input type="file" name="file" value="" id="file"> 
    <p><input type="submit" value="Continue &rarr;" onclick="checkBrowser()"></p> 
    </form> 


    <div id="example"></div>

Nguồn

2011-12-26 07:02:28

Các vấn đề liên quan

 Các vấn đề liên quan