javascript - 在 JavaScript 中将图像居中

Question

我是 JavaScript 新手。正如您在下面看到的，在重定向之前显示了一个 gif 文件，但问题是 loading.gif 显示在上传框 div 之外。如何将其放入 div 内并将其居中(自动边距)。

我尝试了很多方法，但没能成功!

这是 JS 函数:

//Disabling autoDiscover
Dropzone.autoDiscover = false;
$(function() {

//Dropzone class
var myDropzone = new Dropzone(".dropzone");
myDropzone.on("queuecomplete", function() {

    // Display "Please Wait" gif
    var myImage = new Image();
    var ImgSrc = "./loading.gif";
    myImage.setAttribute("src", ImgSrc);
    myImage.style.margin = "0 auto";
    document.body.appendChild(myImage);

    // Wait 3 seconds and then redirect to the link
    window.setTimeout(function() {
    location.href = 'http://www.i-0s.ir/site';
    }, 3000);
});
});

这是 HTML 部分:

<div class="upload-box">
    <p>Please upload your files</p>
    <div class="image_upload_div">
        <form action="upload.php" class="dropzone"></form>
    </div>
</dive>

Answer 1

试试这个:

$(function() {
    //Dropzone class
    var myDropzone = new Dropzone(".dropzone");
    myDropzone.on("queuecomplete", function() {

        // Display "Please Wait" gif
        $('.upload-box').append('<div style="text-align:center;"><img src="./loading.gif"/></div>')

        // Wait 3 seconds and then redirect to the link
        window.setTimeout(function() {
            location.href = 'http://www.i-0s.ir/site';
        }, 3000);
    });
});