Geo-x Geo-x - 1 month ago 34
PHP Question

Upload files with HTML/PHP/AJAX and especially SweetAlert2/jquery_file_upload

I want to upload file from HTML to my server with PHP and js library SweetAlert2.

It work if I do that

swal({
html: '<form action="script/php/upload.php" method="post" enctype="multipart/form-data"><input name=\"upload[]\" id="fileToUpload" accept= "application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" multiple></input></form>'
})


But I don't completely use power of "SweetAlert2" so I try this JAVASCRIPT/AJAX

swal({
input: 'file',
inputAttributes: {
name:"upload[]",
id:"fileToUpload",
accept: "application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
multiple:"multiple"
},
showCloseButton: true,
showCancelButton: true
}).then(function() {
var formData = new FormData();
formData.append('fileToUpload', $('#fileToUpload')[0]);
$.ajax({type:"POST",url:"script\\php\\upload.php",data: formData,processData: false,contentType: false,headers:{"Content-Type":"multipart/form-data"},async:false});
})


But it doesn' work...

My PHP like that

$total = count($_FILES['upload']['name']);
echo($total);

for($i=0; $i<$total; $i++) {
$tmpFilePath = $_FILES['upload']['tmp_name'][$i];

if ($tmpFilePath != ""){
$newFilePath = "d:/web/site_sig_cclo/site_3_administration/script/python/" . $_FILES['upload']['name'][$i];

if(move_uploaded_file($tmpFilePath, $newFilePath)) {
}
}
}


And
echo
always return
0


------EDIT 2016 10 05------

My PHP is launched with this Post value

enter image description here

------EDIT 2016 10 06------

If I use
console.log
on my input file after that
.then(function(file) {
I've :

enter image description here

And if I do the same on my FormData it seems to be empty :

enter image description here

------EDIT 2016 10 12------

I try a technic with the script
jquery_file_upload


I load input in my swal

swal({
title: "Input title",
html: '<input id="fileupload" type="file" name="files[]" multiple>'
});


And after I load my scripts with jquery function for
fileupload


$.getScript("script/jquery_file_upload/js/vendor/jquery.ui.widget.js");
$.getScript("script/jquery_file_upload/js/jquery.iframe-transport.js");
$.getScript("script/jquery_file_upload/js/jquery.fileupload.js", function(){
$("#fileupload").fileupload({
url:"script/python",
dataType: 'json',
add: function (e, data) {
data.context = $('#fileuploadname').text('Uploading...').appendTo(document.body);
data.submit();
},
done: function (e, data) {
data.context.text('Upload finished.');
}
});
});


If I do
console.log
on
data
values I can see all it work, but on my server I've nothing...

enter image description here

Answer

The solution is to open swal function

swal({
    title: "Input title",
    html: '<input id="fileupload" type="file" name="files[]" multiple>'
}).then(function() {
    (...)
}

And after load scripts with jquery function for fileupload at the same level like swal. In this script it's necessary to call the php code for upload files

$.getScript("script/jquery_file_upload/js/vendor/jquery.ui.widget.js");
$.getScript("script/jquery_file_upload/js/jquery.iframe-transport.js");
$.getScript("script/jquery_file_upload/js/jquery.fileupload.js", function(){
    $("#fileupload").fileupload({
        url:"script/php/myuploadphp.php",
        dataType: 'json',
        add: function (e, data) {
            data.context  = $('#fileuploadname').text('Uploading...').appendTo(document.body);
            data.submit();
        },
        done: function (e, data) {
            data.context.text('Upload finished.');
        }
    });
});

And in PHP write that

$tmpFilePath = $_FILES['files']['tmp_name'][0];

      if ($tmpFilePath != ""){
        $newFilePath = "destination_folder" . $_FILES['files']['name'][0];
      }

And that's work !

Comments