0

我有以下启用了 jquery 的 javascript：

<form>
    <input type="file">
</form>

jQuery(function($) {

  $('form').delegate('input[type=file]', 'change', function() {
    var form = $(this).closest('form');
    form.append('<input type="file">');
  });

});

当用户添加他们想要上传的文件时，它将动态添加文件上传字段。如何将其限制为仅图像，并在添加 5 张图像后停止添加新字段？

我正在尝试从拥有众多字段中切换，我将其验证为如下图像：

var valid_extensions = /(.gif|.jpg|.jpeg|.png)$/i;
function CheckExtension(fld){
  if (valid_extensions.test(fld.value)) return true;
  alert('only gif, png or jpg formats are allowed!');
  fld.select();
  fld.value="";
  fld.focus();
  return false;
}

<input type="file" onChange="return CheckExtension(this);">
4

3 回答 3

1

知道你的目标，你应该重写你的函数：

var checkExtension;
var valid_extensions = /(.gif|.jpg|.jpeg|.png)$/i;
var limit = 5; // define the limit of rows here
var i = 0;
$('form').delegate("input[type=file]", "change", function () {
    if (i < limit && checkExtension(this)) {
        $('form').append( $("<input>").attr({type: "file"}) );
    }
    i++;
});
checkExtension = function (fld) {
    if (valid_extensions.test(fld.value)) return true;
    alert('only gif, png or jpg formats are allowed!');
    fld.select();
    fld.value="";
    fld.focus();
    return false;
}
于 2012-07-12T02:02:46.973 回答
0

您可以使用 HTML5 的accept属性来指定您将接受哪些 mimetype。

对于您的限制，一个简单的递增整数和一个三元应该处理它，如下所示：

var i = 0;
$('form').delegate('input[type=file]', 'change', function() {
  var form = $(this).closest('form');
  i < 5 ? form.append('<input type="file">') : "";
  i++;
});

如果你想使用 javascript，谷歌搜索返回了这个 Stack Overflow 答案： Preview an image before it is upload

于 2012-07-12T01:22:28.357 回答
0

在@Austin 的帮助下，这是适合我的最终代码。它将动态创建文件输入字段并仅接受图像。我仍在测试，但这应该适用于所有支持 js 的浏览器。

<form>
<input type="file">

<script>
jQuery(function($) {

    var checkExtension;
    var valid_extensions = /(.gif|.jpg|.jpeg|.png)$/i;
    var limit = 5; // define the limit of rows here
    var i = 1;
    $('form').delegate("input[type=file]", "change", function () {
        if (i < limit && checkExtension(this)) {
            $('form').append( $('<input type="file">') );
        }
        i++;
    });
    checkExtension = function (fld) {
        if (valid_extensions.test(fld.value)) return true;
        alert('only gif, png or jpg formats are allowed!');
        fld.select();
        fld.value="";
        fld.focus();
        return false;
    }

});
</script>
</form>
于 2012-07-12T03:21:00.560 回答