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

结果是文件没有上传，但是“标签”输入值以某种方式到达了服务器脚本，因为它被返回了（我正在使用Chrome 的代码检查器-> 网络对此进行测试）。我说文件没有被上传，因为返回的值为$_FILES["image-to-upload"]["error"]空，Chrome 的进度条也没有出现，尽管我一直在尝试上传的文件相当大。

我在这里做错了什么？

4

1 回答 1

1

文件输入没有name属性 - 这将导致它不被提交。

给你的文件输入 aname以便它可以$_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 回答