25

私はinput type="file"を使用しています。私の要件は、png画像のみを選択したいということです。つまり、ブラウズを選択したときに「png」フィルターを適用する必要があります。

以下は私www.w3schools.com/tags/att_input_accept.aspが使用しているコードです。これは Chrome では正常に動作しますが、Firefox と IE では動作しません。

誰が私が何をしなければならないのかを理解するのを手伝ってくれますか?

 <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" />

ここにフィドルリンクがありますhttp://jsfiddle.net/Jcgja/2/

4

6 に答える 6

21

Java スクリプトを使用して検証する必要があります。以下は、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;
    }
于 2012-04-30T10:55:45.530 に答える
6

w3schoolsのそのページのブラウザサポート情報が正しくありません。

このページをチェックするとaccept、Firefoxに実装されていない属性がわかります。

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

更新：属性はFirefoxに実装されまし
たacceptが、最新バージョンを持っていないユーザーはまだサポートされていません。

于 2012-04-30T10:29:08.480 に答える
1

ご覧のとおり、「accept」属性は主要なブラウザーのいずれでも適切にサポートされていません。フォームの送信イベントで JavaScript 検証を使用して、ファイルの種類が正しいかどうかを確認し、そうでない場合は false を返すことができます。

この属性を検証ツールとして使用しないでください。ファイルのアップロードは、サーバー上で検証する必要があります。

于 2012-04-30T10:21:34.477 に答える
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";
}
?>

これは、ファイルの種類の検証にすぎません。アップロード スクリプト全体ではありません。

于 2012-04-30T11:11:18.957 に答える
0

ファイル関数のjavascript関数onChaneイベントを使用できます

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;
    }
}

于 2013-10-22T10:27:45.580 に答える