使用 ajax 序列化文件类型字段和发布表单数据答案

【问题标题】：serializing file type field and post form data using ajax使用 ajax 序列化文件类型字段和发布表单数据
【发布时间】：2014-02-10 07:05:47
【问题描述】：

我有 2 个输入字段和一个用于上传文件的字段。我正在尝试使用 AJAX 发布表单，序列化表单数据。但问题是我的 $_FILES 为空。

这是我的代码：

           form name="dataform" id="dataform" enctype="multipart/form-data" 

              <input name="url" class="inputForm" id="url"  />

           <input type="file"  id="image" name="image" class="inputForm" />

            $.ajax({

            type: "POST",

    url: "test.php",

    data: datastring,

            success: function(resultdata){


            }

             });

【问题讨论】：

如果你想使用 AJAX 上传文件，你必须创建一个对象表单数据并将文件附加到它，然后将此对象作为数据传递给 php:jsfiddle。然后就可以访问$_FILES获取文件了。

标签： php ajax forms

【解决方案1】：

问题是jQuery会将文件数组转换为字符串，服务器无法获取。

但别担心，总会有替代解决方案，

你可以参考这个插件使用ajax上传图片，

http://www.sanwebe.com/2012/05/ajax-image-upload-and-resize-with-jquery-and-php

很简单，你只需要使用ajax提交表单，然后在php文件中进行上传操作，然后返回ajax函数而不重定向到另一个页面。

【讨论】：

【解决方案2】：

据我所知，您不会使用 ajax 上传文件（任何东西）（没有支持，您可以使用插件、iframe 等）

我来自 java 背景，我不了解 PHP，但我确信你可以通过使用 iframes 来实现这一点，

见see this link

或

我会举例说明你可以怎么做（我在我的项目中做了同样的事情我正在粘贴）

    <form action="${pageContext.request.contextPath}/catalogue/importReportaccon.action" method="post" enctype="multipart/form-data" target="upload_target" id="report_result" >

        <input name="fileData" type="file" id="uploadAccessionNo" class="hidden_import"/>
        <iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>                 

        <a type="button" class="right button left" onclick="displayFileBrowseButton();" id="datasheet_import" title="Import" style="margin-left: -10px;">Import <span class="icon icon7"></a>

    </form>

脚本

function displayFileBrowseButton(){
       $("#uploadAccessionNo").click();
    }


$(document).ready(function() {

    document.getElementById("uploadAccessionNo").onchange = function() {

        document.getElementById("report_result").submit();

    }

});

如果你不明白这一点，请通过你的 cmets 告诉我

【讨论】：