如何通过ajax请求将字符串与文件一起发送到php文件？

Posted 2023-03-10

【中文标题】如何通过ajax请求将字符串与文件一起发送到php文件？

【英文标题】：How to send a string along with file via ajax request to a php file?

【发布时间】：2014-06-25 11:47:05

【问题描述】：

我有一个 php 文件，它将文件保存到服务器到名为 upload 的文件夹中，它通过 ajax 请求接收文件，到目前为止一切正常，下一个要求是与文件一起发送字符串以指定上传文件夹和子文件夹像“Course/Math”这样的文件夹如何实现？

JS

$( document ).ready(function() 
$('#Upload').click(function()
    var formData = new FormData($('form')[0]);
    $.ajax(
        url: 'uploadFile.php',  
        type: 'POST',
        xhr: function()   
            var myXhr = $.ajaxSettings.xhr();
            if(myXhr.upload) 
                myXhr.upload.addEventListener('progress',progressHandling, false);
            
            return myXhr;
        ,
        success: completeHandler,
        data: formData,
        cache: false,
        contentType: false,
        processData: false
    );
);

var progressHandling = function(e)
    if(e.lengthComputable)
        var percent = Math.round((e.loaded / e.total) * 100);
        $('#uploadprogress').css('width', percent+'%');
    


var completeHandler = function(data)
    $('#message').text(data);
    $('#uploadprogress').css('width', '0%');
    $('#file').val('');
;
);     

PHP

<?php
if ($_FILES["file"]["error"] > 0) 

 else 
  move_uploaded_file($_FILES["file"]["tmp_name"],
      "upload/" . $_FILES["file"]["name"]);
  echo true;

?>

【参考方案1】：

使用 .serialize()

在 ajax 调用中发送表单数据的示例

var formData = $('#myform').serialize;
    $.ajax(
        url: 'uploadFile.php',  
        type: 'POST',
        xhr: function()   
            var myXhr = $.ajaxSettings.xhr();
            if(myXhr.upload) 
                myXhr.upload.addEventListener('progress',progressHandling, false);
            
            return myXhr;
        ,
        success: completeHandler,
        data: formData,
        cache: false,
        contentType: false,
        processData: false
    );

如果你想添加一个字符串，只需使用如下：

var value = 'test';
var formData = $('#myform').serialize+"&newstring="+value;

更新

不能通过 ajax 上传文件。 您可以使用IFrame或AjaxFileUpload插件上传文件，无需刷新页面。

更多详情请点击Answer。

也在这里提交一些详细的解释：

jQuery Ajax File Upload jQuery Upload Progress and AJAX file upload

【讨论】：

我如何在 php 中接收它？ $_FILES[] 在这里不起作用，对吧？

【参考方案2】：

您可以使用 html5 Upload 元素。

$("#FileUpload").change(function (e) 
 var uploadFile = e.target.files;
 if (uploadFile.length > 0) 
      if (window.FormData !== undefined) 
           var data = new FormData();
           for (var x = 0; x < uploadFile.length; x++) 
                data.append("file" + x, uploadFile[x]);
           
           data.append("ELEMENTCLASSNAME", $("#ELEMENTID").val());
           $.ajax(
                type: "POST",
                url: 'URL',
                contentType: false,
                processData: false,
                data: data,
                success: function (result) 
                     alert(result);
                ,
                failure: function (result) 
                     alert(result);
                ,
                error: function (xhr, status, p3, p4) 
                     var err = "Error " + " " + status + " " + p3 + " " + p4;
                     if (xhr.responseText && xhr.responseText[0] == "")
                          err = JSON.parse(xhr.responseText).Message;
                     console.log(err);
                
           );
       else 
           alert("This browser doesn't support HTML5 file uploads!");
      
 );

在服务器端使用请求对象获取值：

              var versionName = Request["ELEMENTCLASSNAME"];