建立一個異步文件上傳器（jQuery插件）的問題

我試圖構建一個非常簡單，但跨瀏覽器兼容的異步文件上傳器，作爲一個jQuery插件，我有點麻煩讓文件上傳。建立一個異步文件上傳器（jQuery插件）的問題

該插件基於通過iframe提交文件輸入的原理。貝婁是插件代碼：

(function($) { 
    $.fn.asyncFileUpload = function(options) { 

     // Create some defaults, extending them with any options that were provided 
     $.fn.asyncFileUpload.defaults = { 
      action : "", 
      onStart : function(){}, 
      onComplete : function(){} 
     }; 

     var settings = typeof options != "undefined" ? $.extend($.fn.asyncFileUpload.defaults, options) : $.fn.asyncFileUpload.defaults;   

     return this.each(function(){ 

      var date = new Date(), 
       form = $(this), 
       formID = form.attr("id"),    
       iframe = $(document.createElement("iframe")), 
       iframeID = "iframe-"+date.getTime(); // generate a unique ID for every iframe created (one iframe is associated with a single HTML form) 

      iframe.attr({"id":iframeID, "name":iframeID}).css("display","none").appendTo("body"); 
      form.attr({ "target" : iframeID, "action" : settings.action }); 

      form.on("submit", function(event){ 
       iframe.load(function(event){ 
        alert("iframe loaded"); 
       }); 
      }); 

     }); 
    }; 
})(jQuery);

的HTML：

<form id="image-upload-form" method="post" enctype="multipart/form-data"> 
    Browse: <input type="file" id="image-to-upload" style="margin-left:5px;" /> 
    <input type="hidden" name="tag" value="a file" /> 
    <input type="submit" value="submit" /> 
</form> 

<script> 
    $("#image-upload-form").asyncFileUpload({ 
      action : "uploadimage.php" 
    }); 
</script>

而在服務器端，我放在一起只是一個小腳本來檢查發生了什麼事情與文件：

<?php 
    echo "tag: ".$_POST["tag"]; echo "<br />"; 
    echo "error: ".$_FILES["image-to-upload"]["error"]; 
?>

結果是該文件沒有上傳，但「標記」輸入值以某種方式到達服務器腳本，因爲它已返回（我正在使用測試Chrome的代碼檢查器 - >網絡）。我說這個文件沒有上傳，因爲$_FILES["image-to-upload"]["error"]的返回值是空的，Chrome瀏覽器的進度條也不顯示，儘管我一直在嘗試上傳的文件相當大。

我在這裏做錯了什麼？

來源

2012-09-21 Andrei Oniga

在服務器端試試這個：'echo'

'; print_r($_REQUEST); echo '

';'。這將輸出PHP腳本在POST或GET變量中接收的所有內容。你也可以做'print_r（$ _ FILES）;'看看會發生什麼。找出問題所在 - 你可能會發現它實際上工作正常。 – jammypeach

實際上只是發現了一些東西 - '$ _FILES ['images-to-upload']'將始終爲空，因爲您的文件輸入沒有名稱屬性。給它一個'images-to-upload'的名字，然後再試一次。 – jammypeach

print_r（$ _ FILES）返回一個空數組，print_r（$ _ REQUEST）返回相同的「tag」輸入值（「一個文件」），加上其他一些我不能使用的ID，但沒有任何關於文件:( –

文件輸入沒有name屬性 - 這會導致它不被提交。

給你的文件輸入一個name，這樣它可以在腳本中的$_FILES數組中訪問。

<form id="image-upload-form" method="post" enctype="multipart/form-data"> 

    Browse: <input type="file" 
        id="image-to-upload" 
        style="margin-left:5px;" 
        name="image-to-upload"/> 

    <input type="hidden" name="tag" value="a file" /> 
    <input type="submit" value="submit" /> 
</form>

延伸閱讀這裏：http://www.w3.org/TR/html401/interact/forms.html#control-name

我無法找到明確當輸入時不帶名稱提交會發生什麼規範的特定部分，但ATLEAST Firefox和文件輸入的情況下，它似乎沒有發送數據。

來源

2012-09-21 13:44:29 jammypeach

對於Chrome也是如此（至少），通過它的外觀。無論如何，非常感謝這個想法！它解決了這個問題。 :) –

沒問題，不客氣:) – jammypeach

建立一個異步文件上傳器（jQuery插件）的問題

回答

相關問題