Question

我尝试使用jQuery和php在Sweet Alert 2模式中创建文件上传器。这是我的代码，但它不起作用：我怎样才能使这个工作？

谢谢

HTML（用Sweet Alert 2打开模态的按钮）：

typedef uint8_t byte

JavaScript的：

<button class="bx--btn bx--btn--primary" type="button" id="swal_upload">Apri</button>

php（api / UploadFile.php）：

$('#swal_upload').click(function(){
    var api = 'api/UploadFile.php';
    swal({
        title: "Carica immagine",
        html: '<input id="fileupload" type="file" name="userfile">'
    }).then(function() {
        var formData = new FormData();
        formData.append('userfile', $('#fileupload').val().replace(/.*(\/|\\)/, ''));
        console.log(formData);
        $.ajax({
          type: 'POST',
          url: api,
          data: formData,
          dataType: 'json',
          processData: false,
          contentType: false,
          headers: {"Content-Type":"form-data"},
          async: true,
          success: function(result){
            console.log("OK client side");
            console.log(result.Response);
          }
        });
    })
  });

我在控制台中的输出是：

FormData {} proto ：FormData 好客户端 {输入：＆＃34; PHP已启动＆＃34;，tmp_path：null，new_path：null，file_name：null，已上载：null} 输入：＆＃34; PHP开始＆＃34; FILE_NAME：空 new_path：空 tmp_path：空上传：空的原：对象

正如您所见，php启动了，但没有文件传递给服务器。

Answer 1

我使用了基于Sweetalert 2和<{3}} / FileReader对象的输入文件类型的解决方案。当您使用Sweetalert的输入文件类型时，将创建带有swal2-file css类的输入元素： FormData

然后，您可以使用Sweetalert事件onBeforeOpen通过FileReader对象读取文件数据。最后，您可以使用带有FormData对象的Ajax请求来发送文件。这将是js来源：

$('#swal_upload').click(function() {
     Swal({
        title: 'Select a file',
        showCancelButton: true,
        confirmButtonText: 'Upload',
        input: 'file',
        onBeforeOpen: () => {
            $(".swal2-file").change(function () {
                var reader = new FileReader();
                reader.readAsDataURL(this.files[0]);
            });
        }
    }).then((file) => {
        if (file.value) {
            var formData = new FormData();
            var file = $('.swal2-file')[0].files[0];
            formData.append("fileToUpload", file);
            $.ajax({
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                method: 'post',
                url: '/file/upload',
                data: formData,
                processData: false,
                contentType: false,
                success: function (resp) {
                    Swal('Uploaded', 'Your file have been uploaded', 'success');
                },
                error: function() {
                    Swal({ type: 'error', title: 'Oops...', text: 'Something went wrong!' })
                }
            })
        }
    })
})

在服务器端，使用Laravel Php框架，您可以通过以下函数获取文件：

public function uploadFile(Request $request)
{
    if ($request->hasFile('fileToUpload')) {
        $file_name = $request->file('fileToUpload')->getClientOriginalName();
        $earn_proof = $request->file('fileToUpload')->storeAs("public/files/", $file_name);
    }

    return response()->json(['result' => true], 200);
}

Sweet Alert 2使用php上传jQuery文件

1 个答案: