如何向 ajax 文件上传添加额外的 POST 参数?

Posted

技术标签:

【中文标题】如何向 ajax 文件上传添加额外的 POST 参数?【英文标题】:How do I add additional POST parameters to ajax file upload? 【发布时间】:2015-05-23 06:22:15 【问题描述】:

我正在使用 ajax 文件上传 javascriptphp 脚本来上传图像。它与 $_FILES 一起工作令人满意,但我需要向处理脚本发送一些额外的数据。表单 html 如下所示:

<form id="image1" action="" method="post" enctype="multipart/form-data">
  <label>image 1?</label>
  <p><input type="file" class="saveImage" name="image1" value="<?php echo $something; ?>" id="<?php echo $id; ?>" additional_info="some data" /></p>
  <p> <input type="submit" value="Upload" class="submit" /></p>
</form>

我需要能够传递一个变量 id 和一些其他数据,将其称为“additional_data”到 php 脚本,然后在我的 php 脚本中使用$additional_data = $_POST['additional_data'] 处理它。我使用的javascript是:

    <script>
    $(document).ready(function (e) 
      $("#image1").on('submit',(function(e) 
        e.preventDefault();
        $("#message").empty();
        $('#loading').show();
        var DATA=$(this).val();
        var ID=$(this).attr('id');
        var ADDL=$(this).attr('additional_data');
        var dataString = 'image1='+DATA+'&id='+ID+'&additional_info='+ADDL;
        $.ajax(
          url: "uploadFile.php",  
          type: "POST",        
          // data:  new FormData(this), 
          data:  new FormData(this,dataString),
          contentType: false,   
          cache: false,   
          processData:false,        
          success: function(data)    
          
            $('#loading').hide();
            $("#message").html(data);
          
        );
      ));
    );
    </script>

它不发送 dataString,只发送 FILES 数组。

【问题讨论】:

为什么不把其他数据放到其他隐藏字段中呢? 【参考方案1】:

我也想做同样的事情。 这是我的解决方案:

JS部分:

var file_data = this.files[0];
    file_data.name = idaviz +'.pdf';
    var form_data = new FormData();
    form_data.append("file", file_data);
    form_data.append('extraParam','value231');
    console.log(file_data);
    console.log('here');
    var oReq = new XMLHttpRequest();
    oReq.open("POST", "ajax_page.php", true);
    oReq.onload = function (oEvent) 
        if (oReq.status === 200) 
            console.log('upload succes',oReq.responseText);
         else 
            console.log("Error " + oReq.status + " occurred when trying to upload your file.<br \/>");
        
    ;

    oReq.send(form_data);
);

PHP部分:

echo $_REQUEST['extraParam']; //this will display "value231"
var_dump($_FILES['file']);   //this will display the file object

希望对你有帮助。

可以找到有关 formData 上的额外参数的附加信息 here!

【讨论】:

【参考方案2】:

我希望我理解你的正确。也许这个 sn-p 可以帮助你:

var formData = new FormData();
formData.append("image1", fileInputElement.files[0]);
formData.append("ID", ID);
formData.append("ADDL", ADDL);

然后将这个formData变量设置为数据:

type: "POST",        
data:  formData,
contentType: false,   

【讨论】:

第一段代码 (var formData ...) 我在 var dataString 下方添加。当我添加第一行 formData.append("image1", fileInputElement.files[0]); 时,它会导致表单无法发布。我通过注释掉该行进行了测试。其他附加行也有同样的问题。 我仍在寻找可行的解决方案。不幸的是,建议的答案不起作用。

以上是关于如何向 ajax 文件上传添加额外的 POST 参数?的主要内容,如果未能解决你的问题,请参考以下文章

能用ajax以POST实现文件上传吗

使用 Post 方法的 PHP 上传

如何向 Turbine 添加额外的 Hystrix 指标聚合

基于jQuery的ajax系列之用FormData实现页面无刷新上传

JMeter接口测试示例——上传文件

Ajax上传文件怎样才能分块上传呢?