Làm cách nào để có các loại tệp giới hạn jQuery khi tải lên?

Question

Tôi muốn có giới hạn jQuery một trường tải tệp lên chỉ jpg/jpeg, png và gif. Tôi đang kiểm tra phụ trợ với PHP rồi. Tôi đang chạy nút gửi thông qua một hàm JavaScript vì vậy tôi thực sự chỉ cần biết cách kiểm tra các loại tệp trước khi gửi hoặc cảnh báo.

Answer 1

Bạn có thể nhận được giá trị của trường tệp giống như bất kỳ trường nào khác. Tuy nhiên, bạn không thể thay đổi nó.

Vì vậy, để hời hợt kiểm tra nếu một tập tin có phần mở rộng đúng, bạn có thể làm một cái gì đó như thế này:

var ext = $('#my_file_field').val().split('.').pop().toLowerCase(); 
if($.inArray(ext, ['gif','png','jpg','jpeg']) == -1) { 
    alert('invalid extension!'); 
} 

Answer 2

Bạn có thể sử dụng các plugin xác nhận cho jQuery: http://docs.jquery.com/Plugins/Validation

Nó xảy ra với có quy tắc accept() thực hiện chính xác những gì bạn cần: http://docs.jquery.com/Plugins/Validation/Methods/accept#extension

Lưu ý rằng kiểm soát việc mở rộng tệp sion không phải là bằng chứng đạn vì nó không liên quan đến mimetype của tập tin. Vì vậy, bạn có thể có một .png đó là một tài liệu từ và một .doc đó là một hình ảnh png hoàn toàn hợp lệ. Vì vậy, đừng quên kiểm soát nhiều hơn phía máy chủ;)

Answer 3

Không cần plugin nào chỉ cho tác vụ này. Kết hợp điều này với nhau từ một vài tập lệnh khác:

$('INPUT[type="file"]').change(function() { 
    var ext = this.value.match(/\.(.+)$/)[1]; 
    switch (ext) { 
     case 'jpg': 
     case 'jpeg': 
     case 'png': 
     case 'gif': 
      $('#uploadButton').attr('disabled', false); 
      break; 
     default: 
      alert('This is not an allowed file type.'); 
      this.value = ''; 
    } 
}); 

Bí quyết ở đây là đặt nút tải lên thành tắt trừ khi và cho đến khi loại tệp hợp lệ được chọn.

Answer 4

Bạn không muốn kiểm tra trên MIME nhiều hơn bất kỳ phần mở rộng nào mà người dùng đang nói dối? Nếu vậy thì nó là ít hơn một dòng:

<input type="file" id="userfile" accept="image/*|video/*" required /> 

Answer 5

đối với trường hợp của tôi, tôi sử dụng các mã sau:

if (!(/\.(gif|jpg|jpeg|tiff|png)$/i).test(fileName)) {    
    alert('You must select an image file only');    
    } 

Answer 6

function validateFileExtensions(){ 
     var validFileExtensions = ["jpg", "jpeg", "gif", "png"]; 
     var fileErrors = new Array(); 

     $("input:file").each(function(){ 
      var file = $(this).value; 
      var ext = file.split('.').pop(); 
      if($.inArray(ext, validFileExtensions) == -1) { 
       fileErrors.push(file); 
      } 
     }); 

     if(fileErrors.length > 0){ 
      var errorContainer = $("#validation-errors"); 
      for(var i=0; i < fileErrors.length; i++){ 
       errorContainer.append('<label for="title" class="error">* File:'+ file +' do not have a valid format!</label>'); 
      } 
      return false; 
     } 
     return true; 
    } 

Answer 7

<form enctype="multipart/form-data"> 
    <input name="file" type="file" /> 
    <input type="submit" value="Upload" /> 
</form> 
<script> 
$('input[type=file]').change(function(){ 
    var file = this.files[0]; 
    name = file.name; 
    size = file.size; 
    type = file.type; 
    //your validation 
}); 
</script> 

Answer 8

Nếu bạn đang làm việc với nhiều (html 5) tải lên tệp, tôi lấy nhận xét được đề xuất hàng đầu và sửa đổi nó một chút:

var files = $('#file1')[0].files; 
    var len = $('#file1').get(0).files.length; 

    for (var i = 0; i < len; i++) { 

     f = files[i]; 

     var ext = f.name.split('.').pop().toLowerCase(); 
     if ($.inArray(ext, ['gif', 'png', 'jpg', 'jpeg']) == -1) { 
      alert('invalid extension!'); 

     } 
    } 

Answer 9

Đối với giao diện người dùng, khá thuận tiện khi đặt thuộc tính 'chấp nhận' nếu bạn đang sử dụng trường tệp.

Ví dụ:

<input id="file" type="file" name="file" size="30" 
     accept="image/jpg,image/png,image/jpeg,image/gif" 
/> 

Một vài chú ý quan trọng:

• The accept attribute is supported in Internet Explorer 10, Firefox, Opera, Chrome, and Safari 6.
• It will show text for file extension differently in the file browser dialog from different browsers.

Answer 10

tôi cố gắng viết làm việc mã ví dụ, tôi thử nghiệm nó và làm tất cả mọi việc .

Hare là mã:

HTML:

<input type="file" class="attachment_input" name="file" onchange="checkFileSize(this, @Model.MaxSize.ToString(),@Html.Raw(Json.Encode(Model.FileExtensionsList)))" /> 

Javascript:

//function for check attachment size and extention match 
function checkFileSize(element, maxSize, extentionsArray) { 
    var val = $(element).val(); //get file value 

    var ext = val.substring(val.lastIndexOf('.') + 1).toLowerCase(); // get file extention 
    if ($.inArray(ext, extentionsArray) == -1) { 
     alert('false extension!'); 
    } 

    var fileSize = ($(element)[0].files[0].size/1024/1024); //size in MB 
    if (fileSize > maxSize) { 
     alert("Large file");// if Maxsize from Model > real file size alert this 
    } 
} 

Answer 11

Đây là một mã đơn giản để xác nhận javascript, và sau đó xác nhận nó sẽ làm sạch tệp đầu vào.

<input type="file" id="image" accept="image/*" onChange="validate(this.value)"/> 

function validate(file) { 
    var ext = file.split("."); 
    ext = ext[ext.length-1].toLowerCase();  
    var arrayExtensions = ["jpg" , "jpeg", "png", "bmp", "gif"]; 

    if (arrayExtensions.lastIndexOf(ext) == -1) { 
     alert("Wrong extension type."); 
     $("#image").val(""); 
    } 
} 

Answer 12

Mã này hoạt động tốt, nhưng vấn đề duy nhất là nếu định dạng tệp khác với tùy chọn được chỉ định, nó hiển thị thông báo cảnh báo nhưng nó hiển thị tên tệp trong khi nó bị bỏ qua.

$('#ff2').change(
       function() { 
        var fileExtension = ['jpeg', 'jpg', 'pdf']; 
        if ($.inArray($(this).val().split('.').pop().toLowerCase(), fileExtension) == -1) { 
         alert("Only '.jpeg','.jpg','.pdf' formats are allowed."); 
         return false; } 
}); 

Answer 13

Ví dụ này chỉ cho phép tải lên hình ảnh PNG.

HTML

<input type="file" class="form-control" id="FileUpload1" accept="image/png" /> 

JS

$('#FileUpload1').change(
       function() { 
        var fileExtension = ['png']; 
        if ($.inArray($(this).val().split('.').pop().toLowerCase(), fileExtension) == -1) { 
         alert("Only '.png' format is allowed."); 
         this.value = ''; // Clean field 
         return false; 
        } 
       });