Multiple file upload with progress bar
Question
I'm trying to upload multiple files with progress bars to show how much of the file has been uploaded. For some reason the files are not being uploaded and the progress bars only work for one upload. Please help me alter the code to work.
$('.btnUpload').click(function(){ //submit all form $('form').submit(); }); $(document).on('submit','form',function(e){ e.preventDefault(); $form = $(this); uploadImage($form); }); function uploadImage($form){ alert("in"); $form.find('.progress-bar') var formdata = new FormData($form[0]); //formelement var request = new XMLHttpRequest(); //progress event... request.upload.addEventListener('progress',function(e){ var percent = Math.round(e.loaded/e.total * 100); $form.find('.progress-bar').width(percent+'%').html(percent+'%'); }); //progress completed load event request.addEventListener('load',function(e){ $form.find('.progress-bar').html('upload completed....'); }); request.open('post', 'upload.php'); request.send(formdata); $form.on('click','.cancel',function(){ request.abort(); $form.find('.progress-bar') .html('upload aborted...'); }); }/* function uploadFile(){ $(document).ready(function (e) { $("#uploadForm").on('submit',(function(e) { e.preventDefault(); $.ajax({ url: "upload.php", type: "POST", data: new FormData(this), contentType: false, cache: false, success: function(data){ $("#gallery").html(data); }, xhrFields: { // add listener to XMLHTTPRequest object directly for progress (jquery doesn't have this yet) onprogress: function (progress) { // calculate upload progress var percentage = Math.floor((progress.total / progress.totalSize) * 100); // log upload progress to console console.log('progress', percentage); if (percentage === 100) { console.log('DONE!'); } } }, processData:false, error: function(){} }); })); }); }*/
<html> <head> <title>PHP AJAX Multiple Image Upload</title> <script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script> <SCRIPT SRC="upload.js"></SCRIPT> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="gallery-bg"> <form id="uploadForm" action="" method="post"> <div id="gallery">No Images in Gallery</div> <div id="uploadFormLayer"> <p class="txt-subtitle">Upload Multiple Image:</p> <p><input name="userImage[]" type="file" class="inputFile" /><p> <div class="progress"> <div class="progress-bar" style="width:0%"></div> </div> <p><input name="userImage[]" type="file" class="inputFile" /><p> <div class="progress"> <div class="progress-bar" style="width: 0%;"> </div> </div> <p><input name="userImage[]" type="file" class="inputFile" /><p> <div class="progress"> <div class="progress-bar" style="width: 0%;"> </div> </div> <p><input type="submit" value="Submit" class="btnUpload" /></p> </div> </form> </div> <!-- begin snippet: js hide: false -->
</body>
</html>
1 answers
solution1
0 2015-07-28 17:59:31
This is not an answer to your question, but perhaps a solution to your problem.
What you posted sends the files to the server, but once they get there they are kept in a sandbox -- they must be "handled" once they get there or they won't be stored. Therefore, you must write a processor app in your back-end language (PHP or ASP.Net or etc.) to process the files (validate them, move them to the folder they are supposed to be in, etc.).
If your back-end is PHP, would you consider switching to Ravishanker Kusuma's jQuery Upload File Plugin ? I've tried a bunch of file upload plugins and found Ravi's the best. Use it in all my projects. Try his example (link above) - it's dead simple.
1) Include the Hayageek scripts
2) Add a div, which becomes the dynamic upload button/fields
<div id="fileuploader">Upload</div>
3) Add this jQuery code:
$("#fileuploader").uploadFile({
url:"name_of_your_php_file_that_receives_the_files.php",
fileName:"myfile" //you will use this varname in the php file
});
That PHP file will look something like this:
<?php
$output_dir = "uploads/";
if(isset($_FILES["myfile"])) {
$ret = array();
if(!is_array($_FILES["myfile"]["name"])) {
//just one file
$fileName = $_FILES["myfile"]["name"];
move_uploaded_file($_FILES["myfile"]["tmp_name"],$output_dir.$fileName);
$ret[]= $fileName;
}
else //Multiple files, file[]
{
$fileCount = count($_FILES["myfile"]["name"]);
for($i=0; $i < $fileCount; $i++)
{
$fileName = $_FILES["myfile"]["name"][$i];
move_uploaded_file($_FILES["myfile"]["tmp_name"][$i],$output_dir.$fileName);
$ret[]= $fileName;
}
}
echo json_encode($ret);
}
?>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.