Why isn't the image not copied to the folder?

Question

I'm working with Ajax, PHP.

I want to upload an image without clicking the submit button and I'm using the approach described in this answer: How to upload file using jquery ajax and php (without clicking any submit button)

But it's not working. Do I need to change the data type or something else?

Here's my code:

jQuery/Ajax

$(document).ready(function(){
var b = new FormData($(this).closest("form")[0]);
b.append('image', $('input[type=file]')[0].files[0]);
  $("#imgInput").change(function(){
    $.ajax({
      url: "test.php",
      type: "post",
      datatype: 'json',
      processData: false,
      contentType: false,
      data: b,
      success: function(text){
        if(text== "success"){
          alert("Image uploaded");
        }
      },
      error: function(){
        alert("Not uploaded");
      }
    });
  });
});

test.php

<?php
  $filename=$_FILES["image"]["name"];
  $filetmp=$_FILES["image"]["tmp_name"];
  $filetype=$_FILES["image"]["type"];
  $filepath="images/".$filename;
  move_uploaded_file($filetmp, $filepath);
?>

HTML

<form name="form1" method="post" enctype="multipart/form-data">
  <table>
    <tr>
      <td><input type="text" name="name" placeholder="Enter your name" /></td>
      <td rowspan="3"><div class="propic"><img id="" /></div>
        <input id="imgInput" type="file" name="image" /></td>
    </tr>
    <tr>
      <td><input type="text" name="username" placeholder="Enter username"/></td>
    </tr>
    <tr>
      <td><input id="digits" type="text" name="phone" maxlength="10" placeholder="Enter your phone no."/></td>
    </tr>
    <tr>
      <td><input type="password" name="password" maxlength="12" placeholder="Enter password"/></td>
      <td><input id="button" type="submit" name="submit" value="Sign Up" /></td>
    </tr>
  </table>
</form>

you need to debug your script. Type `var_dump($_FILES)` in `test.php` and inspect that request for example in chrome console. — pr0metheus, Mar 24 '16 at 13:14
What makes you think that `move_uploaded_file` is the culprit? — j08691, Mar 24 '16 at 13:57

Praveen Kumar Purushothaman · Accepted Answer · 2016-03-24T13:24:51.533

1

You need to use FormData() to send files to server through AJAX. Change your script to:

$.ajax({ 
    url: "test.php",
    type: "POST",
    data: new FormData($(this).closest("form")[0]),  // This is the main place you need.
    contentType : false,
    async: false,
    processData: false,
    cache: false,
    success: function(text) {
        if(text== "success"){
          alert("Image uploaded");
        }
    }
});

edited Mar 24 '16 at 13:24

answered Mar 24 '16 at 13:18

Praveen Kumar Purushothaman

164,888
24
203
252

Please edit the Ajax code fully, if possible. I'm not aware with selectors you used. I shall be thankful to you. – Vikas Kumar Mar 24 '16 at 13:21
@VikasKumar That's the final one. What are you not aware of? I can explain you in detail. – Praveen Kumar Purushothaman Mar 24 '16 at 13:22
@VikasKumar You may change the data part like `data: new FormData($(this).closest("form")[0])`. – Praveen Kumar Purushothaman Mar 24 '16 at 13:23
that $(this).parent()[0]) statement. How is it accessing the form value? And how do "this" knows it's the input element? – Vikas Kumar Mar 24 '16 at 13:23
@VikasKumar The `this` here refers to the image `input`. So, `$(this).parent()` should be referring to the form, but it is not. So I asked you to change it to `data: new FormData($(this).closest("form")[0])`. – Praveen Kumar Purushothaman Mar 24 '16 at 13:24
@VikasKumar I have updated my answer. So now, the `.closest("form")` will refer to the form that encloses the input, on which the action is performed. – Praveen Kumar Purushothaman Mar 24 '16 at 13:25
Sir there are two forms in my code, I've posted here only one. How would it know which form? And what is this [0]? – Vikas Kumar Mar 24 '16 at 13:25
@VikasKumar Can you nest a form? Tell me the answer. `:)` – Praveen Kumar Purushothaman Mar 24 '16 at 13:26
1

Make your form just like `id="myForm"` and then call like `$("#myForm")` – pr0metheus Mar 24 '16 at 13:27
Never tried this, so can't tell. Can you make it more simpler so that I can understand? (The part that is accessing the value from desired form) – Vikas Kumar Mar 24 '16 at 13:27
1

@VikasKumar **0.** Do not use the word *sir*. **1.** A `form` cannot be nested. **2.** The image `input` should be nested inside a form. **3.** The image `input` can have only *one* form as its parent. – Praveen Kumar Purushothaman Mar 24 '16 at 13:27
1

@pr0metheus Agree with you, but he needs to understand the right use and scalable use. If you give `id` and use, yes, that's one of the right way and it works, but it is not scalable for different forms, say? – Praveen Kumar Purushothaman Mar 24 '16 at 13:28
Extremely sorry but things have become more complicated :( – Vikas Kumar Mar 24 '16 at 13:28
@VikasKumar What's complicated now? :) Shall we chat? – Praveen Kumar Purushothaman Mar 24 '16 at 13:29
1

@PraveenKumar true – pr0metheus Mar 24 '16 at 13:29
First, there are two forms, as I've already told. You haven't mentioned which form to access? Secondly how does it know which input element in that form to access? There are more inputs. – Vikas Kumar Mar 24 '16 at 13:30
@VikasKumar Answer my question: Can you nest a form? – Praveen Kumar Purushothaman Mar 24 '16 at 13:30
@VikasKumar Need more comments to start the chat. – Praveen Kumar Purushothaman Mar 24 '16 at 13:30
@VikasKumar For now, answer my question. – Praveen Kumar Purushothaman Mar 24 '16 at 13:31
I don't know, because I haven't tried. What is the use of that? – Vikas Kumar Mar 24 '16 at 13:31
Are you there? I'm not satisfied. – Vikas Kumar Mar 24 '16 at 16:37
@VikasKumar I am here... What are you not satisfied? :) – Praveen Kumar Purushothaman Mar 24 '16 at 18:03
@VikasKumar So, we are converting the jQuery Object Collection (typically something like an array) to a HTML Element by doing `[0]` or `.get(0)`. – Praveen Kumar Purushothaman Mar 24 '16 at 18:05
Are you there? I'm back with queries – Vikas Kumar Mar 24 '16 at 20:01
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/107318/discussion-between-praveen-kumar-and-vikas-kumar). – Praveen Kumar Purushothaman Mar 25 '16 at 10:23

score 1 · Answer 2 · edited Mar 25 '17 at 13:04

If you are just looking to get it working, I recommend Ravishanker Kusuma's Hayageek jQuery File Upload plugin. I don't usually recommend plugins, but this one is excellent. It does almost all the work for you.

http://hayageek.com/docs/jquery-upload-file.php

He breaks down the process into four simple steps, that basically look like this:

Look for //1 //2 //3:

<head>
  // (1) Load the js files (note that it requires jQuery, which we also load)
    <link href="http://hayageek.github.io/jQuery-Upload-File/uploadfile.min.css" rel="stylesheet">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://hayageek.github.io/jQuery-Upload-File/jquery.uploadfile.min.js"></script>   // (1)
</head>
<body>
    <div id="fileuploader">Upload</div>  // (2) Create DIV
    <script>
        $(document).ready(function(){
            $("#fileuploader").uploadFile({  // (3) initialize plugin
                url:"my_php_processor.php",
                fileName:"myfile"
            });
        });
    </script>
</body>

The final (fourth) step is to create a PHP file with same name as specified above in the jQuery code (in this case my_php_processor.php) to receive and process the file:

my_php_processor.php:

<?php
    $output_dir = "uploads/";
    $theFile = $_FILES["myfile"]["name"];
    move_uploaded_file($_FILES["myfile"]["tmp_name"],$output_dir.$fileName);

Note the relationship between myfile in the PHP ($_FILES["myfile"]), and the filename myfile specified in the jQuery code block.

On the Hayageek web page, study the upload.php example on the Server tab.

Note that you can also pass additional variables to the my_php_processor.php processor file by using dynamicFormData. See this other example:

$("#fileuploader").uploadFile({
    url:"my_php_processor.php",
    fileName:"myfile",
    dynamicFormData: function(){
        return {
            //my_php_processor.php will receive POST vars below
            newSubj: $("#newSubj").val(),
            newBody: $("#newBody").val(),
        };
    },
    onSuccess:function(files,data,xhr,pd){
        //files: list of files
        //data: response from server
        //xhr : jquery xhr object
        alert(xhr.responseText); //displays data ECHOd by `my_php_processor.php`
    }
});

my_php_processor.php:

<?php
    $n = $_POST['newSubj'];
    $b = $_POST['newBody'];
    $uploadedFile = $_FILES["myfile"]["name"];
    //etc.
    echo 'This will display in the alert box';

jsFiddle Sample Code - Click on Image Example

This looks nice. Will this work when the image is selected? :) — Praveen Kumar Purushothaman, Mar 24 '16 at 14:19
What do you mean, `when the image is selected`? If you mean, can you trigger a pop-up displaying the jQuery File Upload field/button by clicking on a displayed image, then yes -- extremely similar to jsFiddle Sample Code in my answer. ***See additional jsFiddle in answer*** If you mean, will this plugin work with images, then yes -- and you can specify what file/image types to accept or not to accept. Amazing plugin. Read Kusuma's web site carefully - he covers everything using very few words. — cssyphus, Mar 24 '16 at 16:25
To restrict allowed file types accepted by plugin, see http://stackoverflow.com/questions/11832930/html-input-file-accept-attribute-file-type-csv — cssyphus, Mar 24 '16 at 16:32

Why isn't the image not copied to the folder?

2 Answers2

Linked