1

ファイル入力フィールドの検証を行うことを目的とした小さなJavaScriptがあります。Chrome、Safari、Opera、Firefox では正常に動作しますが、Internet Explorer 9 以前では動作しません... 私は Jquery 1.8.3 を使用していますが、明らかに 1.4.2 以降では .change プロパティが IE で動作するはずです。 . $(".fileInput").live('change'... も試しました

何が起きているのかわかりません。アドバイスを歓迎します。

jQuery(document).ready(function($){

    // Detect sh*tty IE
    if ($.browser.msie && $.browser.version <= 9) {

    // Bind to property change
    $(".fileInput").bind('propertychange', function() {

        fileChange(this);
    });

    } else {

    $(".fileInput").change(function() {

        fileChange(this);
    });
    }

  function fileChange($item) {

    // Get the filename
    var $fileName = $($item).val();
    var $inputId = $($item).attr('id');
    var $fakeName = $($item).val().split('\\').pop();
    var $fileSize = (($item.files[0].size)/1024)/1024;
    var $ext = $($item).val().split('.').pop().toLowerCase();
    var $acceptFiles = ['jpg', 'jpeg'];

    if ($.inArray($ext, $acceptFiles) == -1) {

        alert('For security, we can only accept jpeg images');

        // Reset the value of $item item
        $($item).val('');

        return;
    }

    // Make sure the file size isn't bigger than 1mb
    if ($fileSize >= 1.8) {

        alert("The image you've chosen is too big. \n\nWe accept images up to 2mb in size");

        // Reset the value of $item item
        $($item).val('');

        return;
    }

    // Check that the file
    if ($fileName != '') {

        $fileNotification = $('<li>', { id: 'file_'+$inputId, class: 'fileNotification', text: $fakeName});

        // Append it to the list
        $('#filesList').append($fileNotification);
    }

    // Hide the file input
    $($item).css({display : 'none'});

    // Show the next field
    $($item).next().show();     

  };
});
4

1 に答える 1

0

これは IE のchangeイベントや jQuery ハンドラとは関係ありませんが、古い IE には HTML5 API が欠けていることが原因です。

IE9 以下はFile APIをサポートしていません。したがって：

var $fileSize = (($item.files[0].size)/1024)/1024;

入力要素のfilesプロパティは古い IE にあり、 のプロパティにundefinedアクセスできないため、エラーが発生します。つまり、ファイル API を使用して、古い IE でクライアント側のファイル サイズを簡単にテストすることはできません。0undefined

また、古い IE は XHR2 もサポートしていないため、Ajax 経由でファイルを送信してサーバー側でサイズを確認することもできません。そのテストを古い IE で動作させたい場合は、非常に厄介な回避策が必要になります。たとえば、フォームを非表示に自動送信してiframeサーバー側のファイル サイズ チェックを行うか、フラッシュを使用します。

とにかく、JS は簡単に回避できるため、サーバー側の検証があると思います。そのため、クライアント側のチェックをプログレッシブ拡張に変えるだけで簡単に回避できます。

if ($item.files) { //browser supports the HTML5 File API, do the client-side check
    var $fileSize = (($item.files[0].size)/1024)/1024;
    if ($fileSize >= 1.8) {
        alert("The image you've chosen is too big. \n\nWe accept images up to 2mb in size");
        $($item).val('');
        return;
    }
}

これは、IE の古いユーザーが引き続き大きなファイルを選択できることを意味しますが、サーバー側でフォーム データを検証している限り (これは実際の Web アプリに必要です)、意味のあるエラー メッセージを表示するだけで済みます。

ps。値を入力する必要はありません.split('\\').pop()。ファイル入力でユーザーにフル パスが表示される場合でも、ブラウザーは JS がディスク内のファイルのフル パスを認識することを決して許可しません。セキュリティ設定については、関連するを参照してください)。

ps2. ハンドラーをバインドすることはほとんどなく、userAgentスニッフィングを行う必要はありません。イベントは、他のブラウザーの場合と同様に、IE のファイル入力に対しても同様に発生します。$.browserpropertychangechange

于 2013-02-23T14:32:52.250 に答える