Polymer, submit a snapshot with ajax form

I am actually trying to send an image to my server, but it doesn't receive it.

My form:

<form is="ajax-form" action="../../../back/saveIMG.php" method="post" enctype="multipart/form-data">
  <input type="file" name="pic" id="pic "accept="image/*">

  <input type="submit" name="submitInfo">

Run codeHide result

And my php script:

error_reporting(E_ALL | E_STRICT);
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILE["pic"]["name"]);
$uploadOk = 1;
$imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);
if(isset($_POST["submitInfo"])) {

    $check = getimagesize($_FILE["pic"]["tmp_name"]);
    if($check !== false) {
        $uploadOk = 1;
    } else {
        $uploadOk = 0;
if ($uploadOk == 1) {
    $res = move_uploaded_file($_FILE["pic"]["tmp_name"], $target_file);


? >

My script normaly run, I test it earlier, but it just gets an array of messages with the image name.


source to share

1 answer

No JavaScript required. The file is uploaded and can be verified by viewing the network tab in the developer tools of your choice.

To get a handle presenting a PHP file: $_FILES['pic'];

. The file bytes will be saved in $_FILES['pic']['tmp_name']

. For more examples, see the Server Side PHP Fine Uploader , which handles files uploaded via an unrelated JavaScript library.

The Ajax form will submit the file just like a traditional form, provided the browser supports the File API. If you're using IE9 or older, you're out of luck.

While you can use a simple one <input type="file">

, you can also use an element <file-input>

. Disclaimer: I wrote <file-input>

, ajax-form element and Fine Uploader .



All Articles