web-dev-qa-db-ja.com

jQuery：ファイルアップロード入力フィールドの「値」を取得する方法

Javascript/jQueryを使用して、ユーザーが特定の入力type = "file"フィールドのファイルを選択したかどうかを判別することはできますか？

私は、ユーザーがAmazon S3にファイルをアップロードして保存できるExpressionEngine（PHPベースのCMS）のカスタムフィールドタイプを開発しましたが、最も人気のあるEEホスティングサービスがmax_file_uploadsの制限を20に設定しています。 20個のファイルをアップロードし、エントリを編集してさらに20個を追加します。残念ながら、エントリを編集すると、最初の20個のファイルに「この画像を置き換える」ファイル入力フィールドがあり、新しい画像をアップロードする可能性がなくなります。フォームの送信時に、JavaScriptを使用して未使用のファイル入力フィールドを削除したいのですが。

phpjavascriptjqueryformsfile-upload
12
Ty W

はい-値を読み取り、必要に応じてchangeイベントにバインドすることもできます。

<html>
<head>
  <title>Test Page</title>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript">
  $(function()
  {
    $('#tester').change( function()
    {
      console.log( $(this).val() );
    });
  });
  </script>
</head>

<body>

<input type="file" id="tester" />

</body>
</html>

しかし、投稿されたbpeterson76など、ニーズにより適した複数のアップロードソリューションが他にもあります。

19
Peter Bailey

このコードは、フォームからすべての空のファイル入力を削除してから送信します。

HTML：

<form action="#">
  <input type="file" name="file1" /><br />
  <input type="file" name="file2" /><br />
  <input type="file" name="file3" /><br />
  <input type="file" name="file4" /><br />
  <input type="file" name="file5" /><br />

  <input type="submit" value="Submit" />
</form>

JavaScript：

$(function() {
  $("form").submit(function(){
    $("input:file", this).filter(function(){
      return ($(this).val().length == 0);
    }).remove();
  });
});

例：http://jsbin.com/axuka3/

2
Peter Örneholm

このアップローダーは私の目的のために本当にうまくいきました： http://webdeveloperplus.com/jquery/ajax-multiple-file-upload-form-using-jquery/

これをコーディングの基礎として使用する利点は、ファイルが非同期でアップロードされるため、一度に20に制限する必要がないことです。ユーザーが検索している間にアップロードを行うことには、明確なUIの利点があります。

サイズ変更は、必要に応じてかなりいい機能でもあります。

0
bpeterson76