0

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

その結果、ファイルはアップロードされませんが、何らかの形で「タグ」入力値がサーバー スクリプトに到達します。$_FILES["image-to-upload"]["error"]アップロードしようとしているファイルがかなり大きいにもかかわらず、戻り値が空であり、Chrome の進行状況バーも表示されないため、ファイルがアップロードされないと言います。

ここで私が間違っているのは何ですか？

4

1 に答える 1

1

ファイル入力にはname属性がありません。これにより、ファイルが送信されなくなります。

スクリプトの配列でnameアクセスできるように、ファイル入力にaを指定します。$_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

入力が名前なしで送信されたときに何が起こるかを明確にする仕様の特定の部分を見つけることができませんが、少なくともFirefoxとファイル入力の場合、データが送信されないようです。

于 2012-09-21T13:44:29.693 に答える