简体   繁体   English

如何向ajax文件上传添加其他POST参数?

[英]How do I add additional POST parameters to ajax file upload?

I'm using ajax file upload javascript and php script to upload an image. 我正在使用ajax文件上传javascript和php脚本来上传图片。 It works satisfactorily with $_FILES but I need to send some additional data to the processing script. 使用$ _FILES可以很好地工作,但我需要向处理脚本发送一些额外的数据。 The form HTML looks like: 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>

I need to be able to pass a variable id and some other data, call it "additional_data" to the php script, then process it in my php script using $additional_data = $_POST['additional_data'] . 我需要能够传递变量id和其他一些数据,将其称为“additional_data”到php脚本,然后使用$additional_data = $_POST['additional_data']在我的php脚本中处理它。 The javascript I'm using is: 我正在使用的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>

It doesn't send the dataString, only the FILES array. 它不发送dataString,只发送FILES数组。

I also wanted to do the same thing. 我也想做同样的事情。 Here's my solution : 这是我的解决方案:

The JS part : 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);
});

The PHP part: PHP部分:

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

Hope it helps. 希望能帮助到你。

Addition info about extra parameters on formData can be found here ! 有关formData上额外参数的添加信息可以在这里找到!

I hope I understand you right. 我希望我理解你。 Maybe this snippet helps you: 也许这个片段可以帮助你:

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

And then set this formData variable as data: 然后将此formData变量设置为数据:

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM