Question

我想用jquery为这个html添加一个简单的进度条，最简单的方法是什么？我只需要百分比值和进度条。

<!DOCTYPE html>
<html>
<body>

<form action="basic.php" method="post" enctype="multipart/form-data">
    Select file to upload:
    <input type="file" name="file" id="file">
    <input type="submit" value="Upload Image" name="submit">
</form>

</body>
</html>

Answer 1

我最近有一个项目，我应该做同样的事情。正如你可能做的那样，我经历了很多插件，我发现dmUploader插件特别有用。它允许您通过拖放和input标记来获取图像。该插件可用HERE。

我在CODEPEN中创建了一个工作示例，我认为这是学习如何使用此插件的最佳方式。您可能会注意到，从1到290的jQuery代码行只是插件本身。由于插件没有CDN链接，我不得不将其粘贴在那里。让我们来看看代码：

<强> HTML

<div class="SciSecPic">
    <i class="fa fa-fw fa-picture-o"></i>
    <label>
        <span>Click to browse your picture</span>
        <input type="file" title='Click to add Files' style="display:none;">
    </label>

    <div class="progress" style=" display:none;">
        <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
  0%
        </div>
    </div>
</div>

在此示例中，您需要一个名为SciSecPic的容器div，label，其中包含span和input个标记。请注意，input已隐藏，您的按钮是span标记。这就是这个插件的工作原理。然后你可以让你的进度条div为progress类，在这种情况下是一个 Bootstrap 进度条。它主要不显示，只有在上传过程中才会显示。

CSS 不需要特殊设置，因此我将跳过该部分并引用您的工作示例。

jQuery - 设置dmUploader

var readPic;

$(".SciSecPic").each(function () {
    var self = $(this);
    self.dmUploader({
        //url: "/Something/ImageSaver",
        url: "http://posttestserver.com/post.php?dir=ali",
        dataType: "json",
        allowedTypes: "image/*",
        //extraData: {
            //Name: self.data("name"),
            //Id: ~~self.data("id")
        //},
        onInit: function () {

        },
        onNewFile: function (id, file) {

            // showing progressbar
            $(this).find(".progress").show(200);

            /* preparing image for preview */
            if (typeof FileReader !== "undefined") {

                var reader = new FileReader();
                reader.onload = function (e) {
                    readPic = e.target.result;
                }

                reader.readAsDataURL(file);
            };

        },
        onUploadProgress: function (id, percent) {
            $(this).find(".progress-bar").width(percent + "%").attr("aria-valuenow", percent).text(percent + "%");
        },
        onComplete: function () {

            var thisEl = $(this);

            addPic(thisEl, readPic);

            // to fadeout and reset the progress bar at the end
            setTimeout(function () {
                thisEl.find(".progress").hide(200, function () {
                    thisEl.find(".progress-bar").width("0%").attr("aria-valuenow", 0).text("0%");
                })
            }, 300);
        }
    });
});

该变量只是一个占位符，用于存储图像的dataURL，以便稍后在上传完成时显示。如果您使用MVC，必须将url更改为PHP或控制器中的.php文件。您还可以使用extraData方法添加额外数据。 dmUploader为您提供不同的回调函数。他们非常自我解释。例如，onUploadProgress是您可以获取上传百分比并在进度条中显示的位置，onNewFile您可以在其中显示进度条并以dataURL格式读取图像以在进入您的HTML标记，最重要的是onComplete，您可以在上传完成后执行任何操作。这就是我调用的addPic函数，用于在输入框顶部显示上传的图片。

为了简短回答这个问题，我不会在这里解释或复制addPic功能。顺便说一下，IT很容易理解。几乎就是这样。现在你可以拥有你的dmUploader。

将进度条添加到文件输入

1 个答案: