Вопрос по input, html – Как ограничить мой тип ввода = «файл», чтобы принимать только файлы изображений PNG, не работающие в Firefox

23

Я использую тип ввода = & quot; файл & quot ;, теперь мое требование состоит в том, чтобы я хотел выбирать только изображения png, то есть когда я выбираю, просмотрите & quot; png & quot; фильтр должен быть применен.

Я сослалсяwww.w3schools.com/tags/att_input_accept.asp ниже приведен код, который я использую, он отлично работает с Chrome, но не работает с Firefox и IE.

Пожалуйста, кто-нибудь может помочь мне понять, что я должен делать неправильно?

<code> <h2>Below uses accept="image/*"</h2>
 <input type="file" name="pic1" accept="image/*" /> 

 <h2>Below I need to accept only for png</h2>
 <input type="file" name="pic1" accept="image/png" /> 
</code>

& # x200B; Вот ссылка на негоhttp://jsfiddle.net/Jcgja/2/

Вам понадобиться сторона сервера проверка типа файла. Я не думаю, что есть способ сделать это ввс браузеры. mortb
Я полагаю, что вы получили несколько ответов ... Функциональность не поддерживается большинством браузеров. Oded
W3fools расскажет вам, почему w3schools не лучший ресурс для всего, что есть в Интернете. Oded
Проблема с w3schools заключается в том, что они появляются среди лучших результатов в Google, поэтому большинство людей посещают их. mortb
@ Oded Спасибо, что привели меня на такой информативный сайт, я потратил на него почти час, теперь вернемся к проблеме: P Yasser

Ваш Ответ

6   ответов
21

проверки сценария Java

function CheckFileName() {
        var fileName = document.getElementById("uploadFile").value
        if (fileName == "") {
            alert("Browse to upload a valid File with png extension");
            return false;
        }
        else if (fileName.split(".")[1].toUpperCase() == "PNG")
            return true;
        else {
            alert("File with " + fileName.split(".")[1] + " is invalid. Upload a validfile with png extensions");
            return false;
        }
        return true;
    }
спасибо, что это сработало Yasser
Если файл содержит более одной точки, это решение не поможет. Например: Myfile.png.jpg файл будет действительным и Myfile.jpg.png будет недействительным файлом. Ragnar
6

Если вы проверите эту страницу, то увидите, чaccept атрибут, он не реализован в Firefox:

https: //developer.mozilla.org/en/HTML/Element/Inpu

Обновить
Theacceptтрибут @ теперь реализован в Firefox, но пользователи, у которых нет последней версии, по-прежнему не будут иметь поддержки.

Это больше не актуально, оно поддерживается начиная с Firefox 16 Kamil Dziedzic
1

accept' не поддерживается ни одним из основных браузеров. Вы можете использовать проверку javascript в событии onsubmit формы, чтобы проверить правильность типа файла, в противном случае вернуть false.

Не используйте этот атрибут в качестве инструмента проверки. Загрузка файлов должна быть проверена на сервере.

0

ункции

filesChange() {
        checkFile();
        } 
<script type="text/javascript">
function checkFile() {
    var fileElement = document.getElementById("uploadFile");
    var fileExtension = "";
    if (fileElement.value.lastIndexOf(".") > 0) {
        fileExtension = fileElement.value.substring(fileElement.value.lastIndexOf(".") + 1, fileElement.value.length);
    }
    if (fileExtension == "gif") {
        return true;
    }
    else {
        alert("You must select a GIF file for upload");
        return false;
    }
}

1
<?php
if ((($_FILES["pic1"]["type"] == "image/png")
{
if ($_FILES["pic1"]["error"] > 0)
{
echo "Error: " . $_FILES["pic1"]["error"] . "<br />";
}
else
{
echo "Upload: " . $_FILES["pic1"]["name"] . "<br />";
echo "Type: " . $_FILES["pic1"]["type"] . "<br />";
echo "Size: " . ($_FILES["pic1"]["size"] / 1024) . " Kb<br />";
echo "Stored in: " . $_FILES["pic1"]["tmp_name"];
}
}
else
{
echo "Invalid file";
}
?>

0

принятое решение не будет работать с именем файла с несколькими "." в этом. Это должно справиться с этим лучше, оно более устойчивое к ошибкам и гибкое, и Вы можете управлять принятыми расширениями, редактируя массив.

function checkFileExtension() {
    var fileName = document.getElementById("uploadFile").value;

    if(!fileName)
      return false;

    var extension = fileName.split(".");
    if(extension && extension.length > 1){
        extension = [extension.length-1].toUpperCase();
        if (["PNG"].indexOf(extension) != -1)
            return true;
        else{
            alert("Browse to upload a valid File with png extension");
            return false;
        }
    }
    else{
        alert("Browse to upload a valid File with png extension");
        return false;
    }
}

Похожие вопросы