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


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

我想使用PHP和js库SweetAlert2将文件从HTML上传到我的服务器。

如果我这样做就行

1
2
3
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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

1
2
3
4
5
6
7
8
9
10
11
12
13
$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值启动

enter image description here

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

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

enter image description here

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

enter image description here

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

我尝试使用脚本jquery_file_upload的技术

我将输入加载到小号中

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

在使用fileupload的jquery函数加载脚本后

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$.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，则可以看到所有内容，但是在我的服务器上什么也没有。

enter image description here

相关讨论

解决方法是打开swal功能

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$.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编写

1
2
3
4
5
$tmpFilePath = $_FILES['files']['tmp_name'][0];

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

就是这样！