Question

我正在开发一个WordPress主题，我有一个PHP函数应该处理和异步请求，为服务器提供JSON和图像。我的表单（为了便于阅读，剥离了一堆内部HTML）看起来像

       <form method="POST" action="member-update"  enctype="multipart/form-data" id="member-form">
 9">
            <input type="text" name="fullname" value=""> 
            <input type="text" name="title" value="">
            <textarea rows="4" name="bio" form="member-form"></textarea> 
            <input type="text" name="sord" value=""> 
            <input type="file" name="pic">
            <input type="hidden" name="memberAction" value="" />
    </form>

我的用于发出AJAX请求的JavaScript是

        jQuery('.member-update-button').click( function() {
            var parentForm = jQuery(this).closest('form');
            var postData = parentForm.serializeArray();
            jQuery.post( ajaxurl,
                        {'action': 'member_update', 'formStuff' : postData},
                        function(response) { alert('Got this from the server: ' + response); }
                       );
        });

和我的PHP函数，通过WordPress钩子，处理请求开始像

function member_update ( )
{
    // there must be a more elegant way of getting those values out .... 
    $name = $_POST['formStuff'][0]['value'];
    $title = $_POST['formStuff'][1]['value'];
    $bio = $_POST['formStuff'][2]['value'];
    $sord = $_POST['formStuff'][3]['value'];


    $targetFileName = basename($_FILES['pic']['name']);
    $targetFileNameAndPath = 'assets/' . $targetFileName;

我从$_POST['formStuff']数组中获取了值，但我没有为$_FILES['pic']['name']获取任何内容。知道我做错了吗？

Answer 1

您需要使用FormData的实例。在代码中进行以下更改。

在你的html中添加id属性

<input type="file" name="pic" id="pic">

js代码的变化

jQuery('.member-update-button').click( function() {
   formdata = new FormData();
   formdata.append( 'action', 'member_update' );

   jQuery.each(jQuery('#pic')[0].files, function(i, file) {
       formdata.append('file_to_upload', file);
   });

   jQuery.post( ajaxurl, formdata,function(response) {
      alert('Got this from the server: ' + response); 
   });
});

最后更改php函数

function member_update()
{
   $file = $_FILES['file_to_upload']['tmp_name'];
}

为什么我无法获取在<input type =“file”/>中选择的文件？

1 个答案: