如何通过 jQuery 将文件发送到 php？答案

【问题标题】：How to send file to php via jQuery?如何通过 jQuery 将文件发送到 php？
【发布时间】：2023-03-16 10:25:02
【问题描述】：

我尝试通过 jQuery 将文件发送到 PHP 文件进行处理。

<form action="help-uploader.php" method="POST" class="signup" id="upform" enctype="multipart/form-data">

   <input type="text" id="title" name="title" tabindex="1" value="">
   <input id="file" type='file'" />
   <button class="submitbtn" id="submit">submit</button>
</form>

和 jQuery：

$(document).ready(function(){
        $('#submit').click(function (e) {
        // custom handling here
            e.preventDefault();
            var ititle = $("#title").val();
            var ifile = $("#file").val();

            $.post("help-uploader.php",
                {
                    title: ititle,
                    file: ifile
                },function(data, status){alert("Data: " + data + "\nStatus: " + status);});
        });
    });

和**help-uploader.php**

<?php
echo $_POST['file'];
echo basename($_FILES["file"]["name"]);
?>

第一个 ECHO 打印客户端中文件的路径。

第二个 ECHO 不打印任何内容。

如何正确地通过 jQuery 向 PHP 发送文件？

【问题讨论】：

可以使用FormData
How can I upload files asynchronously?的可能重复

标签： php jquery html ajax

【解决方案1】：

您需要使用 formdata 。我提供了一个示例函数，它接受参数，即表单引用和函数回调来做事。这个函数在你的表单提交上绑定事件。试试下面 -

function sendAjaxForm(frm,callbackbefore,callbackdone)
    {
        var form = frm;
        form.submit(function(event){
            event.preventDefault();
            var formData = new FormData(this);
            var ajaxReq=$.ajax({
                url: $(this).attr('action'),
                type: $(this).attr('method'),
                data: formData,
                async: false,
                cache: false,
                contentType: false,
                processData: false,
                beforeSend: callbackbefore
                });
            ajaxReq.done(callbackdone);
        }); // submit done
    }

现在像你的例子那样调用那个函数

sendAjaxForm($('#upform'),function(){alert('sending');},function(data){alert("Data: " + data);})

【讨论】：

谢谢，特别适合页面中每个表单的好功能。

【解决方案2】：

您需要通过使用xmlhttprequest 来利用FormData()。 $.post() 不应在使用 ajax 执行文件上传时使用，因为它不使用 xmlhttprequest 而您应该使用 $.ajax() 或原生 js xmlhttprequest。

当您使用 jQuery 时，您可以使用表单 submit 来代替：

$(document).ready(function(){
    $('#upform').submit(function(e){
      e.preventDefault();
      var fd = new FormData(document.querySelector(this));
      $.ajax({
         url: "help-uploader.php",
         type: "POST",
         data: fd,
         cache:false, // do not cache 
         processData: false,  // required
         contentType: false   // required
         success:function(data){
           console.log(data);
         },
         error:function(err){
           console.log(err);
         }
     });
   });
});

【讨论】：