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

【问题标题】：Upload files with HTML/PHP/AJAX and especially SweetAlert2/jquery_file_upload使用 HTML/PHP/AJAX 上传文件，尤其是 SweetAlert2/jquery_file_upload
【发布时间】：2017-02-13 23:34:36
【问题描述】：

我想使用 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 总是返回0

------编辑 2016 10 05------

我的 PHP 使用这个 Post 值启动

-----编辑 2016 10 06------

如果我在.then(function(file) { 之后在我的输入文件上使用console.log 我已经：

如果我在我的 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，我可以看到一切正常，但在我的服务器上我什么都没有......

【问题讨论】：

我认为这是错误的script\\php\\upload.php 你不需要转义斜线script/php/upload.php 应该可以工作。
感谢您的评论 Franco，但效果并不好
您在使用的时候有没有可追溯的错误？
没有错误，只有……空处理
我明白了，在您的php file 中，您没有上传您想要的文件：$_FILES['upload'] 必须是 $_FILES['fileToUpload']

标签： php ajax file-upload jquery-file-upload sweetalert

【解决方案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];
      }

这就是工作！

【讨论】：