0

I am working with jQuery file upload plugin. Here, I tried to update an existing image:

$(document).ready(function() { 
    var options = { 
        target: '#notification_img',   // target element(s) to be updated with server response 
        beforeSubmit: beforeSubmit,  // pre-submit callback 
        success: afterSuccess,  // post-submit callback 
        resetForm: true        // reset the form after successful submit 
    };
    $('#MyImg').submit(function() {         
        $(this).ajaxSubmit(options);            
        // always return false to prevent standard browser submit and page navigation 
        return false; 
    });

html form

<form action="img_up.php" method="post" enctype="multipart/form-data"  id="MyImg">
        <label>Upload Photo</label><br>
        <input class="inp" id="photo-up" type="file" placeholder="Photo" name="photo-up"/><br/>
        <input class="btn" type="submit"  id="update-img-btn" value="Update" /><br/>
        <img src="images/ajax-loader.gif" id="loading-img" style="display:none; text-align:center;" alt="Please Wait"/>

   </form>

My problem is this page is redirecting to the img_up.php file when I am submitting the form. But this is not suppose to happen as I am using AJAX. The image is not uploading in to the directory. I have included all the required JavaScript files.

halfer
  • 19,824
  • 17
  • 99
  • 186
parvez ron
  • 9
  • 1
  • What errors do you get in your console? It all seems to work fine for me (http://jsfiddle.net/putvande/aqjbLvzr/) Did you define `beforeSubmit` and `afterSuccess`? – putvande May 05 '15 at 16:41
  • yes, i defined these functions. This code supposed to be work fine but not working for me. – parvez ron May 05 '15 at 16:48

3 Answers3

0

change your function with this

$('#update-img-btn').click(function(e) {
e.preventDefault();         
        $('#MyImg').ajaxSubmit(options);            
    //  // always return false to prevent standard browser submit and page navigation 
            return false; 
    });

For file to be uploaded in the directory you have to use this code 

$sourcePath = $_FILES['photo-up']['tmp_name'];       // Storing source path of the file in a variable
$targetPath = "upload/".$_FILES['photo-up']['name']; // Target path where file is to be stored
move_uploaded_file($sourcePath,$targetPath) ;    // Moving Uploaded file

you can search google for tutorials like upload file using ajax php, here are the few links which you can check

http://www.formget.com/ajax-image-upload-php/

http://abandon.ie/notebook/simple-file-uploads-using-jquery-ajax

http://blog.teamtreehouse.com/uploading-files-ajax

tzafar
  • 674
  • 3
  • 12
  • now it's stopped redirecting to the php file but it's not working either. – parvez ron May 05 '15 at 16:41
  • `return false` already stops the form from reloading the page. – putvande May 05 '15 at 16:41
  • nope, my problem is it's not uploading to the directory and it's redirecting to my php file – parvez ron May 05 '15 at 16:45
  • sorry, tzafar. i'm new in asking questions here. So don't know how these things work here :( – parvez ron May 05 '15 at 16:51
  • i have edited my answer please check for more details – tzafar May 05 '15 at 17:13
  • Thanks for that. But can u help me in this case ?? I really need to know what is the problem !! – parvez ron May 05 '15 at 17:16
  • i have edited my answer, for file to upload you have to write code in php without php code you cannot upload the file, as you are new you have to follow tutorials and example which explain you everything in detail – tzafar May 05 '15 at 17:24
  • @parvezron there are thousands of tutorials for uploading files with jquery. I'm sure you can find one and start reading. – Alex May 05 '15 at 19:06
0

Be sure the target exists else load it to target in the success callback

var options = { 
    beforeSubmit: beforeSubmit,  // pre-submit callback 
    success: afterSuccess,  // post-submit callback 
    resetForm: true        // reset the form after successful submit 
};

$('#MyImg').submit(function() {         
    $(this).ajaxSubmit(options);            
    // always return false to prevent standard browser submit and page navigation 
    return false; 
});

function afterSuccess(responseText, statusText, xhr, $form)  { 
    $('#notification_img').html(responseText);
}

Also be sure that the javascript files are loaded properly with jquery Your code looks ok

Ifeanyi Chukwu
  • 3,187
  • 3
  • 28
  • 32
-1

remove img_up.php from the form action, and add this to your ajax:

...  
$('#MyImg').submit(function(event) {
        $.ajax({
            type        : 'POST', // define the type of HTTP verb we want to use (POST for our form)
            url         : 'img_up.php', // the url where we want to POST                
        })

        // stop the form from submitting the normal way and refreshing the page
        event.preventDefault();
Alex
  • 5,759
  • 1
  • 32
  • 47