Question

下面我有一个jquery代码，其中包含一个用户可以选择文件的文本框：

var $imagefile = $('<input />')
    .attr({
        type: 'file',
        name: 'imageFile',
        id: 'imageFile'
    });

我的问题是如何才能让它限制用户选择jpeg，gif或png文件？我希望用户浏览文件，然后单击提交按钮。如果文件类型正确，则显示确认消息否则会显示一条警告，指出“已为图像选择了错误的文件格式”。

下面是验证（），它显示警报：

function validation() {

    var marks = parseInt($("#total-weight").text());    
    var _qid = "";
    var _msg = "";

    var maxQuestions = <?php echo (int)@$_POST['textQuestion']; ?>;
    var questionsAdded = $('tr.optionAndAnswer').length;


    var alertValidation = "";
    // Note, this is just so it's declared...
    $("tr.optionAndAnswer").each(function() {


        _qid = $("td.qid",this).text();
        _msg = "You have errors on Question Number: " + _qid + "\n";

        $(".textAreaQuestion",this).each(function() {



            if (!this.value || this.value.length < 5) {
                alertValidation += "\n\u2022 You have not entered a valid Question\n";
            }

            if (alertValidation != "") {
                return false; //Stop the each loop 
            }
        });


        $(".txtWeightRow",this).each(function() {


            if (!this.value) {
                alertValidation += "\n\u2022 Please enter in a figure for Number of Marks for this Question\n";
            }

            if (alertValidation != "") {
                return false; //Stop the each loop 
            }
        });


        if(alertValidation != ""){
            return false;
        }
    });

Answer 1

您需要将属性accept="image/*"添加到input标记中，如

var $imagefile = $('<input />')
    .attr({
        type: 'file',
        name: 'imageFile',
        id: 'imageFile',
        accept: 'image/*'
    });

您应该仔细检查服务器端，上传正确的类型内容。不要只信任客户端验证。

更多信息here

Answer 2

<input type="file">很长（自1995年推出以来）有一个accept属性，您可以在其中列出要接受的MIME类型，例如： accept="image/*"。不过，最近只有非常的浏览器才开始支持它。目前，Opera 11，Chrome 16，Firefox 9. IE没有。

无法回忆使用accept是否实际过滤了文件选择对话框中列出的文件，或者仅限制用户选择后接受的文件。可能因浏览器和操作系统而异，也可能因OS而异。

但是，您可以在选择文件后检查文件扩展名。像（未经测试）的东西：

var allowedTypes = ["jpg", "jpeg", "gif", "png"]; var path = $imagefile.val(); var ext = path.substring(path.lastIndexOf('.') + 1).toLowerCase(); if ($.inArray(ext, allowedTypes) < 0) { alertValidation += '\n\u2022 Unsupported file type'; }

无论如何，您需要验证服务器上的文件类型，而不是依赖客户端来确保它们是正确的类型。

如何限制文件格式？

2 个答案: