Question

Mam formularz przechowywany w zmiennej javascript poniżej:

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> 

Teraz, jak widać, gdy użytkownik kliknie na przycisk przesyłania, to przedkłada funkcja „startImageUpload”, który jest poniżej:

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

Co robi jest, że gdy użytkownik kliknie na przedstawienia, to wyświetla pasek ładowania i przesyła formularz.

Teraz moje pytanie brzmi, że chcę przeprowadzić prostą walidację javascript, w której, gdy użytkownik kliknie przycisk "Wyślij" w formularzu, sprawdzi, czy plik jest typu pliku "png" lub "gif". Jeśli jest to właściwy typ pliku, wyświetl pasek ładowania i prześlij formularz. Jeśli typ pliku jest niepoprawny, wyświetl komunikat o tym, że typ pliku jest nieprawidłowy, ale nie wyświetlaj paska ładowania i nie przesyłaj formularza.

Czy ktoś wie, jak to można zakodować. Jest tak, że mogę użyć przykładu z jednej z twoich odpowiedzi, a następnie rozwinąć go i użyć javascript do sprawdzenia na większej liczbie typów plików, a także rozmiaru pliku, więc będzie bardzo pomocne, jeśli ktoś może mi pomóc.

Thank You

Answer 1

Spróbuj tego:

$("#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

Można sprawdzić, jak tak ...

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

Alternatywnie, można zatwierdzić typu MIME zaznaczając $('.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 
} 

Specyfikacja HTML ewoluowały również zawierać atrybut accept:

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

(obsługiwany w Chrome, Firefox i Opera - IE10, Safari 6 w najbliższej przyszłości)

Answer 4

To jest moje rozwiązanie, jest dość łatwe i szybkie

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'); 

    }