Question

Tôi đã là một hình thức lưu trữ trong một biến javascript dưới đây:

var $fileImage = $("<form action='imageupload.php' method='post' enctype='multipart/form-data' target='upload_target' onsubmit='startImageUpload(this);' class='imageuploadform' >" + 
"<label> Image File: <input name='fileImage' type='file' class='fileImage' /></label><br/>" + 
"<input type='submit' name='submitImageBtn' class='sbtnimage' value='Upload' /></label></form> 

Bây giờ như bạn có thể nhìn thấy khi người dùng nhấp vào nút gửi, nó nộp cho chức năng 'startImageUpload' dưới đây:

function startImageUpload(imageuploadform){ 
    $(imageuploadform).find('.imagef1_upload_process').css('visibility','visible'); 
    $(imageuploadform).find('.imagef1_upload_form').css('visibility','hidden'); 
    sourceImageForm = imageuploadform; 
     return true; 
} 

Điều gì xảy ra khi người dùng nhấp vào gửi, nó sẽ hiển thị thanh tải và tải lên biểu mẫu.

Bây giờ câu hỏi của tôi là tôi muốn thực hiện xác thực javascript đơn giản khi người dùng nhấp vào nút gửi trong biểu mẫu, nó sẽ kiểm tra xem tệp có phải là loại tệp 'png' hoặc 'gif' hay không. Nếu đó là loại tệp chính xác, sau đó hiển thị thanh tải và tải lên biểu mẫu. Nếu loại tệp không chính xác, sau đó hiển thị thông báo ghi rõ loại tệp không chính xác nhưng không hiển thị thanh tải và không tải lên biểu mẫu.

Có ai biết mã này có thể được mã hóa hay không. Đó là vì vậy tôi có thể sử dụng ví dụ từ một trong các câu trả lời của bạn để sau đó mở rộng trên nó và sử dụng javascript để xác thực trên nhiều loại tệp hơn và kích thước tệp cũng như vậy sẽ rất hữu ích nếu ai đó có thể giúp tôi.

cảm ơn

Answer 1

Hãy thử điều này:

$("#pic").change(function() { 

    var val = $(this).val(); 

    switch(val.substring(val.lastIndexOf('.') + 1).toLowerCase()){ 
     case 'gif': case 'jpg': case 'png': 
      alert("an image"); 
      break; 
     default: 
      $(this).val(''); 
      // error message here 
      alert("not an image"); 
      break; 
    } 
}); 

Answer 2

Bạn có thể kiểm tra như vậy ...

var validExtensions = ['png', 'gif'], 
    validExtensionSupplied = $.inArray(
      ($('.fileImage').val().match(/\.(.*?)]\s*$/) || [])[1], 
      validExtensions) != -1; 

Ngoài ra, bạn có thể xác nhận theo loại MIME bằng cách kiểm tra $('.fileImage').prop('files')[0].type.

Answer 3

function startImageUpload(imageuploadform){ 

    var form = $(imageuploadform) 
    , value = form.find('.fileImage').val() 

    form.find('.imagef1_upload_process').css('visibility','visible') 
    form.find('.imagef1_upload_form').css('visibility','hidden') 

    if (!/\.(png|gif)$/.test(value)){ 
    return false 
    } 
    return true 
} 

Các đặc điểm kỹ thuật HTML cũng tiến hóa để bao gồm một accept thuộc tính:

<input type="file" accept="image/png,image/gif" /> 

(hỗ trợ trong Chrome, Firefox và Opera - IE10, Safari 6 trong tương lai gần)

Answer 4

Đây là Giải pháp của tôi, nó khá dễ dàng và nhanh chóng

var accept = $(event.target).attr('accept'); 
    //<input name='fileImage' accept='.png,.jpg,.jpeg' type='file' class='fileImage' /> 

    value = $(event.target).val(), ext = value.substring(value.lastIndexOf('.')); 

    if(ext && accept.indexOf(ext) == -1){ 

     console.log('No'); 

    }