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 2012-04-23 07:37:22

if（（$ _ FILES）） var_dump（$ _ FILES）; 其他迴應「Nothing」; – marifrahman 2012-04-23 07:53:40

不過，U可以在這裏查看整個代碼：http://pastebin.com/BBZLaGJk – marifrahman 2012-04-23 07:56:08

<?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;?>

基本上，你必須調用所述數據對象的方法submit在功能add。然後你會得到包含$_FILES作爲json字符串的data對象。而且你不必使用實際的表單來通過這個插件發送文件，但是你可以用一個表單標籤（就像它在你的代碼中）包裝輸入，以便允許沒有JavaScript的用戶（它們是否存在？:)）也發送文件。如果您不想通過JavaScript發送文件，那麼爲了顯示文件列表，您不必使用該插件。你可以得到有關使用文件清單https://developer.mozilla.org/en-US/docs/Web/API/FileList

來源

2013-08-02 14:42:51 serg66

jQuery的文件上傳和獲得$ _Files

回答

相關問題