Question

我正在尝试构建一个非常简单但跨浏览器兼容的异步文件上传器，作为jQuery插件，我在上传文件时遇到了一些麻烦。

此插件基于通过 iframe 提交文件输入的原则。 Bellow是插件代码：

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

结果是文件没有上传，但是“tag”输入值以某种方式到达服务器脚本，因为它已经返回（我正在使用 Chrome的代码检查器 - ＆gt; Network < / em>的）。我说文件没有上传，因为$_FILES["image-to-upload"]["error"]的返回值为空，Chrome的进度条也没有出现，尽管我试图上传的文件相当大。

我在这里做错了什么？

Answer 1

文件输入没有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

我找不到规范的特定部分，说明在没有名称的情况下提交输入时会发生什么，但至少在Firefox和文件输入的情况下，数据似乎无法发送。

无法构建异步文件上传器（jQuery插件）

1 个答案: