HTML: Jak ograniczyć przesyłanie plików do samych obrazów?

Jak za pomocą HTML ograniczyć typy plików, które można przesyłać?

Aby ułatwić użytkownikom obsługę, chcę ograniczyć przesyłanie plików do samych obrazów (jpeg, gif, png).

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

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

Plik wejściowy HTML5 ma atrybut akceptacji, a także atrybut wielokrotny. Używając wielu atrybutów, możesz przesłać wiele obrazów w jednej instancji.

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

Możesz także ograniczyć wiele typów MIME.

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

i inny sposób sprawdzania typu MIME przy użyciu obiektu pliku.

obiekt pliku podaje nazwę, rozmiar i typ.

var files=e.target.files;

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

Możesz również ograniczyć możliwość przesyłania niektórych typów plików przez użytkownika za pomocą powyższego kodu.

Edytowano

Gdyby wszystko było tak, jak POWINNO, można to zrobić za pomocą atrybutu „Akceptuj”.

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

Jednak przeglądarki prawie to ignorują, więc jest to nieodparte. Krótka odpowiedź brzmi: nie sądzę, aby można było to zrobić w HTML. Zamiast tego musiałbyś to sprawdzić po stronie serwera.

Poniższy starszy post zawiera informacje, które mogą pomóc w znalezieniu alternatyw.

Atrybut „accept” dla wejścia pliku - czy jest przydatny?

Oto kod HTML do przesłania obrazu. Domyślnie pokaże pliki graficzne tylko w oknie przeglądania, ponieważ umieściliśmy accept="image/*". Ale nadal możemy to zmienić z listy rozwijanej i pokaże wszystkie pliki. 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 zmiany najpierw sprawdzamy rozmiar obrazu. W drugim ifwarunku sprawdzamy, czy jest to plik obrazu.

this.files[0].type.indexOf("image")będzie, -1jeśli nie jest to plik 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]);
};

<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 plikiem jpg, czy nie, i ogranicza możliwość przesyłania innych typów

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

Proponuję: odrzucić wszystkie pliki niebędące obrazami, ostrzec użytkownika i ponownie wyświetlić formularz.

Ostatecznie filtr wyświetlany w oknie Przeglądaj jest ustawiany przez przeglądarkę. Możesz określić wszystkie żądane filtry w atrybucie Accept, ale nie masz gwarancji, że przeglądarka użytkownika będzie go przestrzegać.

Najlepszym rozwiązaniem jest przeprowadzenie pewnego rodzaju filtrowania na zapleczu serwera.

Pobierz projekt o nazwie Uploadify. http://www.uploadify.com/

Jest to program do przesyłania plików oparty na Flash + jQuery. Wykorzystuje to okno dialogowe wyboru plików Flash, które daje możliwość filtrowania typów plików, wybierania wielu plików w tym samym czasie itp.