How to implement File Upload using jQuery AJAX and PHP?

Question

0.00/5 (No votes)

See more:

imageUpload.html

XML

<html>
<head>
<script src="../js/jquery-1.11.1.min.js"></script>

</head>
<body>
<div id="project_features" class="project_features">
        <form action="uploader.php" enctype="multipart/form-data">
                <label for="file">Featured Image:</label>
                <input type="file" name="myfile[]" multiple="multiple" id="featured_image"><br>

        <input type="submit" id="submit" value="Submit" />
                     </form>
    </div>
</body>
</html>

uploader.php

PHP

<?php


$upload_dir = "uploaded_files/images/";

if (isset($_FILES["myfile"])) {
    $no_files = count($_FILES["myfile"]['name']);
    for ($i = 0; $i < $no_files; $i++) {

        if ($_FILES["myfile"]["error"][$i] > 0) {
            echo "Error: " . $_FILES["myfile"]["error"][$i] . "<br>";
        } else {
            $temp = explode(".", $_FILES["myfile"]["name"][$i]);
            $extension = end($temp);
                 move_uploaded_file($_FILES["myfile"]["tmp_name"][$i], $upload_dir . $_FILES["myfile"]["name"][$i]);
                echo "<br><font color='green'>".$_FILES["myfile"]["name"][$i] . " Uploaded Successfully.</font><br>";
        }
    }
}
?>

This code is storing the multiple Images in required folder.But How can I do the same functionality using jQuery and Ajax?Please help me sort this one out!

Posted 17-Nov-14 0:09am

Janardhanam Julapalli

Add a Solution

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Adrian Fatol · Answer 1 · 2014-11-17T01:04:00

Solution 1

here's a nice and small jquery plugin for that https://github.com/jfeldstein/jQuery.AjaxFileUpload.js[^]

Posted 17-Nov-14 1:04am

Adrian Fatol

Comments

Janardhanam Julapalli 17-Nov-14 7:27am

I should not use any plugins.I should do it by ajax.

Adrian Fatol 17-Nov-14 7:42am

there are many solutions to this, see: https://www.google.ro/search?q=upload+image+using+ajax+jquery&oq=upload+image+using+ajax. what kind of problem do you encounter, more precisely?

Janardhanam Julapalli 17-Nov-14 8:27am

Janardhanam Julapalli 17-Nov-14 8:29am

I am using above ajax code to send the images to php but I know that it will not work.I don,t know how to proceed.Just I need to store the selected image files to be stored in a folder via AJAX.

Adrian Fatol 18-Nov-14 3:49am

- first you need to suppress the events when clicking the submit button:

jQuery('#submit').click(function(event)
{
event.stopPropagation(); // Stop stuff happening
event.preventDefault(); // Totally stop stuff happening

- second, you need to add the data to your ajax post:

$.ajax(
{
url: 'uploader.php', // point to server-side PHP script
dataType: 'text', // what to expect back from the PHP script, if anything
cache: false,
contentType: false,
processData: false,
type: 'post',
data: form_data
..................

posting the html would also help.

[no name] 6-Aug-18 9:28am

You will have to create ajaxupload.php for that and add following code:

```
$(document).ready(function (e) {
$("#form").on('submit',(function(e) {
e.preventDefault();
$.ajax({
url: "ajaxupload.php",
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
beforeSend : function()
{
//$("#preview").fadeOut();
$("#err").fadeOut();
},
success: function(data)
{
if(data=='invalid')
{
// invalid file format.
$("#err").html("Invalid File !").fadeIn();
}
else
{
// view uploaded file.
$("#preview").html(data).fadeIn();
$("#form")[0].reset();
}
},
error: function(e)
{
$("#err").html(e).fadeIn();
}
});
}));
});
```

In above code using $ajax() method for send data to php also check the success data or error in data sending.

Source: PHP File Upload with Ajax and jQuery

How to implement File Upload using jQuery AJAX and PHP?

1 solution

Solution 1

Add your solution here

Preview 0

How to implement File Upload using jQuery AJAX and PHP?

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us