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 的事件或 jQuery 处理程序无关change，而是旧的 IE 缺乏 HTML5 API。

IE9 及以下不支持File API。因此：

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

输入元素的files属性在旧 IE 中，undefined您将收到一个错误，因为您无法访问0. undefined也就是说，您将无法使用 File API 在旧 IE 客户端轻松测试文件大小。

而且由于旧的 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 应用程序都是必需的），那么您只需要显示一个有意义的错误消息即可。

附言。你不需要.split('\\').pop()输入值——即使文件输入显示了用户的完整路径，浏览器永远不会让 JS 知道磁盘中文件的完整路径，只知道它的文件名（除非你篡改安全设置，见相关）。

ps2。您不需要用更少的绑定处理程序进行userAgent嗅探，该事件对于 IE 的文件输入将与其他浏览器一样触发。$.browserpropertychangechange

于 2013-02-23T14:32:52.250 回答