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

Improve this question
2

1 Answer 1

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

27 Comments

i tried your code, but the preogress bar is not getting displayed.
You have to put css as per that. This is code only to track progress on ajax.
Please check i have include css and it's implementation also.
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
May be problem is something else.Check console.log(percentComplete); do you get this? If you get this then problem with display means css.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.