jQueryファイル$ _Filesのアップロードと取得

jQueryプラグインhttps://github.com/blueimp/jQuery-File-Uploadを使用してファイルをアップロードしています。私は、アップロードボタンを使用して選択したファイルを表示し、フォームが送信されたときにファイルをアップロードするだけです。以下の私のコードです：

<form id="myform" method="post" enctype="multipart/form-data"> 
       <span class="btn btn-success btn-mini fileinput-button"> 
        <i class="icon-plus icon-white"></i> 
        <span>Add files</span> 
        <input id="fileupload" type="file" name="files[]" multiple> 
        <button type="submit" id="start_uploads">Start uploads</button> 
       </span> 
    </form>

私は次のコードを使用してリストを作成することができます

$('#fileupload').fileupload({ 
     dataType: 'json', 
     add: function (e, data) { 
          $.each(data.files, function (index, file) { 
           //alert('Added file: ' + file.name); 
           $('<li/>').text(file.name).appendTo('#fileList'); 
              }); 

            }, 

           });

をしかし、私は、私は$ _FILESかのvar_dump（ファイル）に何かを得るドンフォームを送信するとき。誰でも私が逃していることと、これをどのように達成できるのかを助けてくれますか？ jsコードをリストに使用しないと、選択したすべてのファイルを持つ$ _FILES変数が得られます。

出典

2012-04-23 marifrahman

あなたもあなたのPHPコードを投稿できますか？ – WolvDev

if（（$ _ FILES）） var_dump（$ _ FILES）; else echo "Nothing"; – marifrahman

しかし、Uはここでコード全体を確認できます：http://pastebin.com/BBZLaGJk – marifrahman

<?php if(!empty($_FILES)):?> 
    <?php echo json_encode($_FILES);?> 
<?php else:?> 
    <!DOCTYPE HTML> 
    <html> 
     <head> 
      <meta charset="utf-8"> 
      <title>jQuery File Upload Example</title> 
      <link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap.min.css"> 
      <!-- Generic page styles --> 

      <!-- Bootstrap styles for responsive website layout, supporting different screen sizes --> 
      <link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap-responsive.min.css"> 
      <!-- Bootstrap CSS fixes for IE6 --> 
      <!--[if lt IE 7]><link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap-ie6.min.css"><![endif]--> 
      <!-- Bootstrap Image Gallery styles --> 
      <link rel="stylesheet" href="http://blueimp.github.com/Bootstrap-Image-Gallery/css/bootstrap-image-gallery.min.css"> 
      <!-- CSS to style the file input field as button and adjust the Bootstrap progress bars --> 
      <link rel="stylesheet" href="css/jquery.fileupload-ui.css"> 
     </head> 
     <body> 
      <input id="fileupload" type="file" name="files[]" multiple> 
      <button id="sendFiles">Send</button> 
      <ul id="fileList"></ul> 
      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <script src="js/vendor/jquery.ui.widget.js"></script> 
      <script src="js/jquery.iframe-transport.js"></script> 
      <script src="js/jquery.fileupload.js"></script> 
      <script src="js/jquery.fileupload-ui.js"></script> 
      <script> 
       $(function() { 
        var filesData; 
        $('#fileupload').fileupload({ 
         dataType: 'json', 
         add: function (e, data) { 
          filesData = data; 
          $.each(data.files, function (index, file) { 
           $('<li/>').text(file.name).appendTo('#fileList'); 
          }); 

         }, 
         done: function (e, data) { 
          console.log(data); 
         } 

        }); 

        $('#sendFiles').on('click', function() { 
         if (filesData) { 
          filesData.submit(); 
         } 
        }); 
       }); 
      </script> 
     </body> 
    </html> 
<?php endif;?>

は基本的には、機能addにデータオブジェクトのメソッドsubmitを呼び出す必要があります。次に$_FILESをjson文字列として含むdataオブジェクトを取得します。そして、このプラグインを介してファイルを送信するために実際のフォームを使用する必要はありませんが、JavaScriptなしでユーザーに許可するためにフォームタグで入力をラップすることができます（存在しますか？:)）ファイルを送信することもできます。 JavaScriptを使用してファイルを送信したくない場合は、ファイルリストを表示するために、プラグインを使用する必要はありません。あなたはFileListを使用してファイルに関する情報を得ることができますhttps://developer.mozilla.org/en-US/docs/Web/API/FileList

出典

2013-08-02 14:42:51 serg66

jQueryファイル$ _Filesのアップロードと取得

答えて

関連する問題