3

I have a form that submit value to the server though ajax.

<form>
<input id="titlee" name="titlee">
<input type="file" name="fileToUpload" id="fileToUpload">
<button  type="submit" value="submit" id="submit" name="submit">Start</button>
<div class="progress"></div>
</form>

Script

<script type="text/javascript">
$(function() 
    {
        $("#submit").click(function() 
            {
                var titlee = $("#titlee").val();
                var fileToUpload= $("#fileToUpload").val();

                var dataString = 'titlee='+ titlee + '&fileToUpload=' + fileToUpload;

                $.ajax(
                    {
                        type: "POST",
                        url: "c_insert_test.php",
                        data: dataString,
                        success: function()
                    });

                return false;
            });
    });
</script>

c_insert_test.php

   <?php
    $titlee = $_POST['titlee'];
    $target_dir = "reqdoc/";
    $target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
    $uploadOk = 1;
    $imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);

    $new_filename = $target_dir . uniqid() . '.' . $imageFileType;
    if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $new_filename))
        {   
            $filee = $new_filename;
            // insert query to insert the image path and other parameters in the table
        }
    else
        {
            echo "false";
        }
     ?>

For the progress bar I have code here at this jsfiddle

I wish to display a progress bar while the paramters and the image gets uploaded to the server through the form. However I am not able to merge the progress bar with the ajax, can anyone please tell how i can merge these 2 code so that i can display the progress bar and upload the image to the server folder

Pn12
  • 43
  • 1
  • 7

1 Answers1

2

I will give you way as per What is the cleanest way to get the progress of JQuery ajax request?

JQuery

$(function() 
{
    $("#submit").click(function() 
    {
        var titlee = $("#titlee").val();
        var wtag = $("#wtag").val();

        var dataString = 'titlee='+ titlee + '&wtag=' + wtag ;

        $.ajax({
            xhr: function () {
                var xhr = new window.XMLHttpRequest();
                xhr.upload.addEventListener("progress", function (evt) {
                    if (evt.lengthComputable) {
                        if (evt.lengthComputable) {
                            var percentComplete = evt.loaded / evt.total;
                            console.log(percentComplete);
                            $('.progress').css({
                                width: percentComplete * 100 + '%'
                            });
                            if (percentComplete === 1) {
                                $('.progress').addClass('hide');
                            }
                        }
                    }
                }, false);

                xhr.addEventListener("progress", function (evt) {
                    if (evt.lengthComputable) {
                        var percentComplete = evt.loaded / evt.total;
                        console.log(percentComplete);
                        $('.progress').css({
                            width: percentComplete * 100 + '%'
                        });
                    }
                }, false);

                return xhr;
            },
            type: 'POST',
            url: "c_insert_test.php",
            data: dataString,
            success: function (data) {
                //Do something on success
            }
        });

        return false;
    });
});

CSS

.progress {
    display: block;
    text-align: center;
    width: 0;
    height: 3px;
    background: red;
    transition: width .3s;
}
.progress.hide {
    opacity: 0;
    transition: opacity 1.3s;
}

This can be a proper solution to do this.

Community
  • 1
  • 1
Parth Trivedi
  • 3,802
  • 1
  • 20
  • 40
  • i tried your code, but the preogress bar is not getting displayed. – Pn12 Dec 14 '15 at 07:19
  • You have to put css as per that. This is code only to track progress on ajax. – Parth Trivedi Dec 14 '15 at 07:39
  • Please check i have include css and it's implementation also. – Parth Trivedi Dec 14 '15 at 07:46
  • i applied css but still wasn't able to display the bar. also i have updated the post, would appreciate if u could go through it once again – Pn12 Dec 14 '15 at 08:57
  • May be problem is something else.Check console.log(percentComplete); do you get this? If you get this then problem with display means css. – Parth Trivedi Dec 14 '15 at 09:06
  • i am not getting value for console.log(percentComplete); – Pn12 Dec 14 '15 at 09:27
  • Please check for console(1) after addEventListener did you get that? Give me the position where it will stop getting. – Parth Trivedi Dec 14 '15 at 09:30
  • Did you check this http://stackoverflow.com/questions/22502943/jquery-ajax-progress-via-xhr?answertab=active#tab-top this can be solve your issue. – Parth Trivedi Dec 14 '15 at 09:35
  • i am not so sure about console(1) coz i am not getting any value in console area – Pn12 Dec 14 '15 at 09:41
  • Put console.log(evt.lengthComputable); after xhr.upload.addEventListener. it gives true/false? – Parth Trivedi Dec 14 '15 at 09:44
  • i tried the link, but it didnt helped in my case, using console.log(evt.lengthComputable); i got true value in console – Pn12 Dec 14 '15 at 09:47
  • If you get console.log(evt.lengthComputable); true then you should get console.log(percentComplete); – Parth Trivedi Dec 14 '15 at 09:49
  • Problem is only with css if you reach inside if condition and getting percentComplete. – Parth Trivedi Dec 14 '15 at 09:50
  • i placed console.log(percentComplete); after var percentComplete = evt.loaded / evt.total; and i got true value, in console under post i am getting values under parameters but the image is not getting uploaded in server folder, does it have anything to do with php code? – Pn12 Dec 14 '15 at 10:01
  • i have posted the php code, this code is working properly seperately but i think its not working properly with ajax – Pn12 Dec 14 '15 at 10:09
  • Please trace you got all the parameter at php code? – Parth Trivedi Dec 14 '15 at 10:10
  • You can not upload file like $("#fileToUpload").val(); you have to for form submit like http://phppot.com/jquery/jquery-progress-bar-for-php-ajax-file-upload/ – Parth Trivedi Dec 14 '15 at 10:13
  • k, but if i upload the image through this method then how should i pass the path of the uploaded image to the script in order to save it in the db table – Pn12 Dec 14 '15 at 10:18
  • var filename = $('input[type=file]').val().split('\\').pop();. – Parth Trivedi Dec 14 '15 at 10:22
  • did that, but its still giving only the file name instead of the path – Pn12 Dec 14 '15 at 10:30
  • yes you can not find filePath. why you need filepath? – Parth Trivedi Dec 14 '15 at 10:31
  • i am saving the images on server in a folder so if the folder name is img then i need the path as img/image_name.jpg in order to display it in front end, and also i downloaded the code from the link u gave, but it is not running properly – Pn12 Dec 14 '15 at 10:34
  • path should be your server Folder where you make file save after upload.you only have to store image name "abc.png" in DB. then you can access like "Upload/abc.png". – Parth Trivedi Dec 14 '15 at 10:36
  • can u plz tell me the code that i should use to upload the img, because i am not able to upload the img through the code given in the url u provided – Pn12 Dec 14 '15 at 10:40
  • just first mark this as answer.This talk is taking to longer. – Parth Trivedi Dec 14 '15 at 10:41
  • Please check http://stackoverflow.com/questions/28644773/php-ajax-image-uploading-with-formdata?answertab=active#tab-top also vote it up. – Parth Trivedi Dec 14 '15 at 10:45
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/97837/discussion-between-parth-trivedi-and-pn12). – Parth Trivedi Dec 14 '15 at 10:50