HTML: Jak ograniczyć wysyłanie plików do zdjęć?

Question

W HTML, jak mogę ograniczyć typy plików, które można załadować?

Aby ułatwić obsługę, chcę ograniczyć wysyłanie plików do zdjęć (jpeg, gif, png).

<form method="post" action="..." enctype="multipart/form-data"> 
<label for="image">Photo</label> 
<input name="image" type="file" /> 
</form> 

Answer 1

Edited

Jeśli wszystko było tak jak powinno być, można to zrobić za pomocą atrybutu "Akceptuj".

http://www.webmasterworld.com/forum21/6310.htm

Jednak przeglądarki prawie ignorować tego, więc jest to irrelavant. Krótka odpowiedź brzmi, nie sądzę, że istnieje sposób, aby to zrobić w HTML. Zamiast tego musisz sprawdzić to po stronie serwera.

Następujący starszy wpis zawiera informacje, które mogą pomóc w rozwiązaniu problemu alternatywnego.

File input 'accept' attribute - is it useful?

Answer 2

Można to zrobić tylko bezpiecznie na stronie serwera. Używanie atrybutu "accept" jest dobre, ale musi być również sprawdzone po stronie serwera, aby użytkownicy nie mogli cURL do skryptu bez tego ograniczenia.

Proponuję, abyś: odrzucił plik nie będący obrazem, ostrzec użytkownika i ponownie wyświetlić formularz.

Answer 3

Ostatecznie filtr wyświetlany w oknie przeglądania jest ustawiany przez przeglądarkę. Możesz określić wszystkie wymagane filtry w atrybucie Accept, ale nie masz żadnej gwarancji, że przeglądarka użytkownika będzie się do niego stosować.

Najlepszym rozwiązaniem jest wykonanie pewnego rodzaju filtrowania z tyłu serwera.

Answer 4

HTML5 mówi <input type="file" accept="image/*">. Oczywiście nigdy nie ufaj walidacji po stronie klienta: Zawsze sprawdzaj ponownie po stronie serwera ...

Answer 5

Zamówienie projektu o nazwie Uploadify. http://www.uploadify.com/

Jest to program do przesyłania plików oparty na technologii Flash + jQuery. Wykorzystuje to okno dialogowe wyboru plików Flash, które umożliwia filtrowanie typów plików, wybieranie wielu plików w tym samym czasie itd.

Answer 6

Dane wejściowe pliku HTML5 mają atrybut accept, a także wiele atrybutów. Korzystając z wielu atrybutów, możesz przesłać wiele obrazów w instancji.

<input type="file" multiple accept='image/*'> 

Można także ograniczyć liczbę typów MIME.

<input type="file" multiple accept='image/*|audio/*|video/*' > 

oraz inny sposób sprawdzania typu mime za pomocą obiektu pliku.

Obiekt pliku zawiera nazwę, rozmiar i typ.

var files=e.target.files; 

var mimeType=files[0].type; // You can get the mime type 

Można również ograniczyć użytkownika dla niektórych typów plików do przesłania według powyższego kodu.

Answer 7

Oto kod HTML do przesyłania zdjęć.Domyślnie pliki obrazów będą wyświetlane tylko w oknie przeglądania, ponieważ wstawiliśmy accept="image/*". Ale wciąż możemy go zmienić z menu i wyświetli wszystkie pliki. Tak więc część Javascript sprawdza czy wybrany plik jest rzeczywistym obrazem.

<div class="col-sm-8 img-upload-section"> 
    <input name="image3" type="file" accept="image/*" id="menu_images"/> 
    <img id="menu_image" class="preview_img" /> 
    <input type="submit" value="Submit" /> 
</div> 

Tutaj, w przypadku zdarzenia zmiany, najpierw sprawdzamy rozmiar obrazu. W drugim wariancie if sprawdzamy, czy jest to plik obrazu.

this.files[0].type.indexOf("image") będzie -1, jeśli nie jest plikiem obrazu.

document.getElementById("menu_images").onchange = function() { 
    var reader = new FileReader(); 
    if(this.files[0].size>528385){ 
     alert("Image Size should not be greater than 500Kb"); 
     $("#menu_image").attr("src","blank"); 
     $("#menu_image").hide(); 
     $('#menu_images').wrap('<form>').closest('form').get(0).reset(); 
     $('#menu_images').unwrap();  
     return false; 
    } 
    if(this.files[0].type.indexOf("image")==-1){ 
     alert("Invalid Type"); 
     $("#menu_image").attr("src","blank"); 
     $("#menu_image").hide(); 
     $('#menu_images').wrap('<form>').closest('form').get(0).reset(); 
     $('#menu_images').unwrap();   
     return false; 
    } 
    reader.onload = function (e) { 
     // get loaded data and render thumbnail. 
     document.getElementById("menu_image").src = e.target.result; 
     $("#menu_image").show(); 
    }; 

    // read the image file as a data URL. 
    reader.readAsDataURL(this.files[0]); 
}; 

Answer 8

<script> 

    function chng() 
    { 
     var typ=document.getElementById("fiile").value; 
     var res = typ.match(".jp"); 

     if(res) 
     { 
      alert("sucess"); 
     } 
     else 
     { 
      alert("Sorry only jpeg images are accepted"); 
      document.getElementById("fiile").value="; //clear the uploaded file 
     } 
    } 

</script> 

Teraz w części html

<input type="file" onchange="chng()"> 

ten kod sprawdzi, czy przesłany plik jest plik jpg lub nie i ogranicza przesyłanie innych typów