在 sweetalert 上显示文件的上传百分比（变量）答案

【问题标题】：Displaying file's uploading percentage (a variable) on sweetalert在 sweetalert 上显示文件的上传百分比（变量）
【发布时间】：2019-12-01 04:58:17
【问题描述】：

我们如何实际创建一个变量，该变量是文件在 sweetalert 上的上传百分比？我使用 PyCharm 作为平台，使用 Django 作为 GUI 框架。

我实际上已经查看了与 Ajax、PHP 和 sweetalert 相关的几种类型的问题（找不到与我相关的特定问题），并尝试了一些混合和匹配一些解决方案，不幸的是，没有其中有工作。

如下所述是我当前的代码：

在html中：

<form id='upload' method="post" enctype="multipart/form-data" onsubmit="myFunction()"> {% csrf_token %}

<input name="datas" type="file" id="datas"/>

<input type="submit" value="Submit" name="btnform3" style="height:6%; width:75%"/>

</form>

<script>
function myFunction() {

    Swal.fire({
        title: 'Status:',
        text: 'Files Uploading...',
        imageUrl:'static/widget-loader-lg-en.gif',
        html: '<h3 id="status"></h3>',
        showConfirmButton: false,
        allowOutsideClick: false,
    })
}

function _(el) {
    return document.getElementById(el);
}

function uploadFile() {
    var file = _("datas").files[0];
    var formdata = new FormData();
    formdata.append("datas", file);
    var ajax = new XMLHttpRequest();
    ajax.upload.addEventListener("progress", progressHandler, false);
    ajax.addEventListener("load", completeHandler, false);
    ajax.open("POST","static/upload.php");
    ajax.send(formdata);
}

function progressHandler(event) {
    var percent = (event.loaded / event.total) * 100;
    _("status").innerHTML = Math.round(percent) + "% uploaded... please wait";
}

function completeHandler(event) {
    _("status").innerHTML = event.target.responseText;
}

在upload.php：

<?php

$fileName = $_FILES["datas"]["name"]; // The file name
$fileTmpLoc = $_FILES["datas"]["tmp_name"]; // File in the PHP tmp folder
$fileType = $_FILES["datas"]["type"]; // The type of file it is
$fileSize = $_FILES["datas"]["size"]; // File size in bytes
$fileErrorMsg = $_FILES["datas"]["error"]; // 0 for false... and 1 for true
?>

任何 cmets 和解决方案将不胜感激。谢谢。

【问题讨论】：

标签： javascript php html django ajax

【解决方案1】：

如果有人想知道答案，就是这样 - 删除 myFunction() 并添加到 uploadFile()

function uploadFile() {
    var file = _("raw_mica_datas").files[0];
    var formdata = new FormData();
    formdata.append("raw_mica_datas", file);
    var ajax = new XMLHttpRequest();
    ajax.upload.addEventListener("progress", progressHandler, false);
    ajax.open("POST","static/upload.php");
    ajax.send(formdata);
    swal.fire({
        title: 'Status:',
        text: 'Files Uploading...',
        html: '<h3 id="status">',
        imageUrl:'static/InternetSlowdown_Day.gif',
        showConfirmButton: false,
        allowOutsideClick: false,
    })

}

干杯:)

【讨论】：