使用 HTML/PHP/AJAX 尤其是 SweetAlert2/jquery_file_upload 上传文件

Question

我想使用 PHP 和 js 库 SweetAlert2.

将文件从 HTML 上传到我的服务器

如果我这样做就有效

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>'
})

但是我没有完全使用"SweetAlert2"的力量所以我试试这个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});
})

但它不起作用...

我的PHP就是这样

$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)) {
    }
  }
}

并且echo总是return0

------编辑 2016 年 10 月 5 日------

我的 PHP 使用此 Post 值启动

------编辑 2016 年 10 月 6 日------

如果在那之后我在我的输入文件上使用 console.log .then(function(file) { 我有 :

如果我对我的 FormData 做同样的事情，它似乎是空的：

------编辑 2016 年 10 12------

我尝试使用脚本技术 jquery_file_upload

我在 swal

中加载 input

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

在我为 fileupload

加载带有 jquery 函数的脚本后

$.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.');
        }
    });
});

如果我对 data 值执行 console.log，我可以看到它的所有工作，但在我的服务器上我什么都没有...

Answer 1

解决方法是开启swal功能

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

并且在加载具有 jquery 功能的脚本后，在与 swal 相同的级别上进行文件上传。在此脚本中，需要调用 php 代码来上传文件

$.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.');
        }
    });
});

并在 PHP 中写下

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

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

这就是工作！

使用 HTML/PHP/AJAX 尤其是 SweetAlert2/jquery_file_upload 上传文件

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

php

ajax

file-upload

jquery-file-upload

sweetalert