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

@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 に答える
0

HTML5 のaccept属性を使用して、受け入れる MIME タイプを指定できます。

制限については、次のように、単純な増分整数と 3 進数で処理する必要があります。

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

JavaScript を使用する場合、Google 検索で次のスタック オーバーフローの回答が返されました: アップロードする前に画像をプレビューする

于 2012-07-12T01:22:28.357 に答える