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

Question

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

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;
}
?>

Answer 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