Question

我已经在我的wordpress主题上制作了一个表单，我想让用户上传图片。这是我的HTML

<input type="file" id="file" />
<button id="uplod" ">Upload</button>

以下是我的js

jQuery("#uplod").click(function()
{
   console.log("trying to fetch image");
    var selectedFile = jQuery('#file').get(0).files[0];
    console.log(selectedFile);
    var ajaxdata=
    {
        action:"reg_upload_img",
        img:"selectedFile"
    }
    jQuery.post(ajaxurl, ajaxdata,function(res)
    {
        jQuery(".divError").html(res);
    });
});

我在theme.php文件中的函数是

function fiu_upload_file(){
$error = '';
var_dump($_FILES);
wp_die();
}
add_action('wp_ajax_reg_upload_img', 'fiu_upload_file');
add_action('wp_ajax_nopriv_reg_upload_img', 'fiu_upload_file');

我应该在我的js代码和php代码中添加什么，以便表单的图像可以传递到我的wordpress目录，以便我可以在wp数据库中保存和处理它

Answer 1

您无法使用jQuery.post()上传文件，只有XMLHttpRequest可以与FormData一起使用，jQuery.ajax()可以在内部使用XMLHttpRequest 。

jQuery("#uplod").click(function(e) {
  e.preventDefault();

  var fd = new FormData($("#file"));
  fd.append("action", "reg_upload_img");
  fd.append("img","selectedFile");

  $.ajax({
    url: url,
    type: "POST",
    data: fd,
    processData: false,  // tell jQuery not to process the data
    contentType: false   // tell jQuery not to set contentType
  });

});

以及带有按钮属性的小错误，您还有一个额外的"：

<button id="uplod">Upload</button>
//----------------^-----------one extra '"' removed from here.

使用ajax将图像从表单传递到wordpress而不使用任何插件

1 个答案: