PHP - 上传图片和 $_files 变量

Question

I'm creating a blog with a WYSIWYG editor for blog posts as well as an image upload for each blog post.

So my inputs look something like this, I'm including a file here called wysiwyg.php but this isn't really necessary for this question. (It basically has buttons for bold italics etc, and it's just included like this because I use it in other areas of my site)

<form action="blog_create.php" method="POST">
    <input id="title" name="title" type="text" placeholder="Title">
    <input id="post_image" name="post_image" type="file">
    <textarea id="description" name="description" placeholder="Description"></textarea>
    <textarea id="meta" name="meta" placeholder="Meta"></textarea>

    <div id="wysiwyg_controls"><?php include_once("wysiwyg.php"); ?></div>
    <iframe name="richTextField" id="wysiwyg" class="news_article"></iframe>

    <input type="hidden" id="text_content" name="text_content" value="">
    <input type="hidden" id="save_as_type" name="save_as_type" value="">

    <button id="blog_draft_submit" name="blog_draft_submit" onclick="return false">Save as Draft</button>
    <button id="blog_publish_submit" name="blog_publish_submit" onclick="return false">Publish</button>
</form>

I then use JavaScript/jQuery to submit the form like so to actually get the content of the iframe:

$("#blog_draft_submit").on("click", function(){
    $text_content = richTextField.document.getElementsByTagName('body')[0].innerHTML;
    $("#text_content").attr("value", $text_content);
    $("#save_as_type").attr("value", "draft");
    this.form.submit();
});
$("#blog_publish_submit").on("click", function(){
    $text_content = richTextField.document.getElementsByTagName('body')[0].innerHTML;
    $("#text_content").attr("value", $text_content);
    $("#save_as_type").attr("value", "publish");
    this.form.submit();
});

However, this doesn't seem to be working properly for the file input or being able to access anything that should be in the Global $_FILES variable.

If I do var_dump($_FILES); I get:

array (size=0)
  empty

But when I do var_dump($_POST); I get:

array (size=8)
  'title' => string '' (length=0)
  'post_image' => string 'image.png' (length=23)
  'description' => string '' (length=0)
  'meta' => string '' (length=0)
  'wysiwyg_image' => string '' (length=0)
  'text_content' => string '' (length=0)
  'save_as_type' => string 'draft' (length=5)

Is this because of the way I am submitting via JS or am I actually doing something wrong? Will I need to create a seperate parsing file and do an XMLHttpRequest and something AJAX-like?

Edit

AJAX is not needed.

Answer 1

Try adding enctype="multipart/form-data" in <form> tag

Some rules to follow when we use are working with $_FILE :

1. Check if the file_uploads = On on the php.ini file
2. Make sure that the form uses method="post"
3. The form also needs the following attribute: enctype="multipart/form-data" ( It specifies which content-type to use when submitting the form )

Without the requirements above, the file upload will not work.