Javascript jqueryajax-使用FormData上传文件

我试图在WordPress管理中使用AJAX上传文件。这是我的密码：

   <script>
        $(document).ready(function()
            {
                $("#upload_app").click(function(e)
                {
                    event.stopPropagation();
                            event.preventDefault();

                    var data = new FormData();

                    aaa = document.getElementById("path_to_file");

                    alert(aaa.files[0]);

                    data.append("newFile",aaa.files[0]);

                    alert(data["newFile"]);

                    $.ajax({
                        url: "'.get_site_url().'/wp-content/plugins/move_and_match/upload_file.php",
                        type: "POST",
                        data: data,
                        cache: false,
                        dataType: "json",
                        processData: false,
                        contentType: false,
                        success: uploadDone,
                        error: uploadFailed
                    });
                });
            });

            function uploadDone(returns)
            {
                alert(returns);
                $("#uploadFileMetaBox p").text("Successfull.");
            }

            function uploadFailed(returns)
            {
                alert(returns);
                $("#uploadFileMetaBox p").text("Problem occured.");
            }
</script>

$（文档）.ready（函数（）
{
$（“#上传应用程序”）。单击（功能（e）
{
event.stopPropagation（）；
event.preventDefault（）；
var data=new FormData（）；
aaa=document.getElementById（“路径到文件”）；
警报（aaa.files[0]）；
data.append（“newFile”，aaa.files[0]）；
警报（数据[“新文件”]）；
$.ajax({
url:“'.get_site_url（）./wp content/plugins/move_and_match/upload_file.php”，
类型：“POST”，
数据：数据，
cache:false，
数据类型：“json”，
processData:false，
contentType:false，
成功：上传完成，
错误：上载失败
});
});
});
函数上传完成（返回）
{
警报（返回）；
$（“#uploadFileMetaboxP”）.text（“Successfull”）；
}
函数上载失败（返回）
{
警报（返回）；
$（“#UploadFileMetaboxP”）.text（“出现问题”）；
}

AJAX访问PHP脚本没有问题，但没有发送任何文件。如您所见，我在脚本中添加了一些警报。第一个

警报（aaa.files[0]）

可以正常工作，但第二个（当aaa的值应该插入FormData对象时）表示该值是

未定义的

这是

我做了什么坏事

---

谢谢你的回答。

哦，我知道了，你想用javascript（AJAX）发送文件吗

因为如果安全性不好，您就无法访问通过javascript浏览按钮添加的文件和文件路径。我知道你应该用表格寄

我知道的方法是使用隐藏的

：

您应该在使用javascript创建代码的主体中有一个HTML

元素

想在活动中使用AJAX吗？例如，单击一次上载按钮或一次更改浏览文件输入，您应该这样做（当您想要提交表单时，调用ajaxUpload（iframeObj））

“ajaxUpload（）”函数将表单的目标设置为iframe，然后提交表单

我们为iframe的onload添加了一个监听器，因此当表单上传并且结果来自服务器时，将调用iframeReady函数，然后获取iframe的内容（这里是上传图像的url） 5.（注意，您在PHP文件中发送的输出应该包含在HTML和body标记中，因为我们可以获取iframe的body内容）

整个想法是这样的，我已经测试过了，如果还有任何问题，请告诉我

javascript:

$(document).ready(function(){

    function ajaxUpload(mf){
      $(mf).prop('target',#hiddenIframe');
      $(mf).submit();
      $('#hiddenIframe').on('load',function(){
        IframeReady();
      }
    }

    function getFrameContents(iFrame){
       var iFrameBody;
       if ( iFrame.contentDocument ) 
       { // FF
         iFrameBody = iFrame.contentDocument.getElementsByTagName('body')[0];
       }
       else if ( iFrame.contentWindow ) 
       { // IE
         iFrameBody = iFrame.contentWindow.document.getElementsByTagName('body')[0];
       }
        return iFrameBody.innerHTML;
    }

    function IframeReady(){
      var miframe=$('#hiddenIframe');
      var result;
      var $odiv=$('#result');
      result=getFrameContents(miframe);
      $odiv.html(result);
    }
});

HTML:

结果将显示在这里。
请上传您的图片：

PHP文件（saveImage_ajax.PHP）（或任何您想要的文件）

无标题文件

• FormData

  对象不公开其任何项，因此没有

  数据[“newFile”]

• 你的url完全不可靠<代码>'.get_site_url（）。/wp content/plugins/move_and_match/upload_file.php可能不是我们想要的url

  url: "<?php echo get_site_url() ?>/wp-content/plugins/move_and_match/upload_file.php",
  

  url:“/wp content/plugins/move_and_match/upload_file.php”，
  

• 当事件参数为

  e

  时使用

  event

  将在未设置全局

  event

  对象的浏览器上失效。您应该将其重命名为event<代码>功能（事件）{

---

不确定这对您来说失败的原因，因为您的AJAX调用看起来就像相关问题中的公认答案。您可以尝试使用AJAX表单插件。您是否有其他上下文？例如，您如何上传文件，如何识别文件？等等etc@RichPeck在我的PHP中只有：if（isset（$\u GET['files']）{echo json\u encode(“已发送文件”）；}其他{echo json_encode（“未发送文件”）；}您是否尝试只发送一些数据（不是文件）看看Ajax是否真的启动了？不幸的是，它仍然无法工作。有没有可能因为这些输入不在form object中而无法工作？它在WordPress编辑页面中，我无法在那里插入表单。好的，让我们一起解决它。但在此之前，请给我您页面的链接以及您想要做什么和做什么的完整描述你想要达到。因为我认为还有其他方法可以达到目标。很抱歉，我不能给你访问权限，因为这是我为我的公司做的web。简而言之：我有文件输入和按钮。该按钮不应该提交表单，而是使用AJAX调用另一个PHP文件，该文件将上载输入中选择的文件。谢谢你的帮助！s抱歉，我的回复太晚了，我是离线的。所以你有一个表单，例如，通过浏览按钮从用户那里获取图像，你想上传图像而不刷新，使用AJAX，对吗？也许可以显示上传图像的预览，对吗？我知道的方式是使用iframe和表单。然后……我应该如何“找到”呢“该文件在PHP中？@HonzaKopecky该文件可能在中找到，这可能是我的问题..我使用了$\u POST[“input\u name”]/$\u GET[“input\u name”]…因此我应该使用$\u FILES[“input\u name”]？@HonzaKopecky仅对文件使用它。

<?php

// do some stuff to save Image In a location.

$ret= json_encode(array('status'=>'ok','src'=>'the destination of image file'));

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<?php
echo $ret;
?>
</body>
</html>

url: "<?php echo get_site_url() ?>/wp-content/plugins/move_and_match/upload_file.php",