2010-07-19 30 views
13

Có thể xác định xem người dùng đã chọn tệp cho trường nhập cụ thể loại = "tệp" bằng javascript/jQuery chưa?jQuery: cách lấy "giá trị" của trường nhập tệp tải lên

Tôi đã phát triển loại trường tùy chỉnh cho ExpressionEngine (CMS dựa trên PHP) cho phép người dùng tải lên và lưu trữ tệp của họ trên Amazon S3, nhưng dịch vụ lưu trữ EE phổ biến nhất đã đặt giới hạn max_file_uploads là 20. Tôi muốn cho phép người dùng tải lên 20 tệp, chỉnh sửa lại mục nhập để thêm 20 nữa, v.v. Thật không may khi chỉnh sửa mục nhập 20 tệp ban đầu có trường nhập tệp "thay thế hình ảnh này" có vẻ như đang loại bỏ khả năng tải lên hình ảnh mới . Tôi muốn xóa mọi trường nhập tệp không sử dụng qua javascript khi biểu mẫu được gửi.

Trả lời

20

Có - bạn có thể đọc giá trị và thậm chí liên kết với sự kiện change nếu bạn muốn.

<html> 
<head> 
    <title>Test Page</title> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script type="text/javascript"> 
    $(function() 
    { 
    $('#tester').change(function() 
    { 
     console.log($(this).val()); 
    }); 
    }); 
    </script> 
</head> 

<body> 

<input type="file" id="tester" /> 

</body> 
</html> 

Nhưng còn có các giải pháp khác, đa tải lên có thể phù hợp với nhu cầu của bạn hơn, chẳng hạn như bpeterson76 được đăng.

+0

đánh giá cao điều đó. không nghĩ rằng .val() sẽ trả lại bất cứ điều gì trên một đầu vào tập tin, đoán tôi nên đã chỉ cần thử nó :) các công cụ tải lên nhiều không phải là khá phù hợp với hướng tôi muốn đi thời gian này, mặc dù thường Tôi đồng ý. Cảm ơn một lần nữa. –

+0

Các trường đầu vào tệp hoàn toàn có thể đọc được - không thể ghi được. –

0

tải lên này đã làm việc thực sự tốt cho mục đích của tôi: http://webdeveloperplus.com/jquery/ajax-multiple-file-upload-form-using-jquery/

Lợi ích khi sử dụng nó như là một cơ sở cho việc mã hóa của bạn là các tập tin được tải lên không đồng bộ, vì vậy không cần thiết phải hạn chế đến 20 tại một thời điểm. Có một lợi ích UI rõ ràng để thực hiện việc tải lên trong khi người dùng đang tìm kiếm.

Thay đổi kích thước cũng là một tính năng khá hay, nếu bạn cần!

2

Mã này sẽ loại bỏ tất cả các yếu tố đầu tập tin rỗng từ hình thức và sau đó gửi thông tin:

HTML:

<form action="#"> 
    <input type="file" name="file1" /><br /> 
    <input type="file" name="file2" /><br /> 
    <input type="file" name="file3" /><br /> 
    <input type="file" name="file4" /><br /> 
    <input type="file" name="file5" /><br /> 

    <input type="submit" value="Submit" /> 
</form> 

JavaScript:

$(function() { 
    $("form").submit(function(){ 
    $("input:file", this).filter(function(){ 
     return ($(this).val().length == 0); 
    }).remove(); 
    }); 
}); 

Ví dụ: http://jsbin.com/axuka3/

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