如何使用隱藏的iframe + jquery進行文件上傳？

我們都知道使用jquery單獨進行文件上傳是不可能的。但是可以使用jQuery和隱藏的IFrame做一些工作。如何使用隱藏的iframe + jquery進行文件上傳？

我發現了四種使用此方法的解決方案，但沒有看到如何實現它們。

This solution found here on Stackoverflow，是這樣做的一種方式。但我不確定這是否是最好的方法。（未測試）
Using jQuery Form plugin是另一種選擇。我試過以下this example，但它沒有幫助。該解決方案將我的uploader.php加載到新頁面中，並且無法獲取文件信息。我無法使用IFrame查看它。
Ajax File Upload是另一種解決方案 - 這是一個裝箱動態IFrame。看看示例代碼，我無法弄清楚如何實現這一點。
最後的解決方案是來自Webtoolkit的AJAX file upload。在這裏，我不知道應該在哪裏聲明應該爲文件處理加載哪個PHP文件。

有沒有人有使用這些方法之一的工作示例？
我在另一個解決方案中使用了Uploadify - 但我現在不想使用Flash。

來源

2010-09-07 Steven

第一個就足夠了。我這樣做。 – Zlatev 2010-09-07 17:57:03

但是它說什麼PHP文件應該處理文件？ – Steven 2010-09-07 18:23:51

對於＃3這基本上就是他們的網站。

我是一個.Net小夥子，所以我無法真正幫助您處理.php處理程序，您需要收到該文件，但我希望您覺得這很有用。

<html> 
    <head> 
    <link href="http://www.phpletter.com/css/general.css" rel="stylesheet" type="text/css" media="screen"> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 
    <script type="text/javascript" src="http://www.phpletter.com/contents/ajaxfileupload/ajaxfileupload.js"></script> 
    <script type="text/javascript"> 
    function ajaxFileUpload() 
    { 
     $.ajaxFileUpload 
     (
      { 
       //YOUR URL TO RECEIVE THE FILE 
       url: 'http://localhost/testing/postfile.php', 
       secureuri:false, 
       fileElementId:'fileToUpload', 
       dataType: 'json',   
       success: function (data, status) 
       { 
        if(typeof(data.error) != 'undefined') 
        { 
         if(data.error != '') 
         { 
          alert(data.error); 
         }else 
         { 
          alert(data.msg); 
         } 
        } 
       }, 
       error: function (data, status, e) 
       { 
        alert(data.error); 
        alert(e); 
       } 
      } 
     ) 
     return false; 
    } 
    </script> 
    </head> 
    <body> 
    <form name="form" action="" method="POST" enctype="multipart/form-data"> 
     <table cellpadding="0" cellspacing="0" class="tableForm"> 
      <thead> 
       <tr> 
        <th>Ajax File Upload</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td><input id="fileToUpload" type="file" size="45" name="fileToUpload" class="input"></td> 
       </tr> 
       <tr> 
        <td>Please select a file and click Upload button</td> 
       </tr> 
      </tbody> 
      <tfoot> 
       <tr> 
        <td><button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">Upload</button></td> 
       </tr> 
      </tfoot> 
     </table> 
    </form> 
    </body> 
</html>

來源

2010-09-07 20:56:46

現在，我有uploader.php輸出正確的JSON，我發現沒有POST數據正在發送，'$ _FILES'爲NULL。任何想法可能是什麼？ – Steven 2010-09-09 09:52:33

看起來像你找到你的答案：http://stackoverflow.com/questions/3675908/ajaxfileupload-plugin-does-not-retrieve-post-or-files-data。需要幫助請叫我。 – 2010-09-09 11:52:54

我最終使用＃3的插件製作了一個解決方案。唯一的問題是，從FORM到我的uploader.php文件的唯一數據是'$ _FILE'數據。我還需要檢索'$ _POST'數據，所以我會嘗試（再次）使用＃2來製作解決方案。 – Steven 2010-09-13 15:23:02

如何使用隱藏的iframe + jquery進行文件上傳？

回答

相關問題