Javascript 将进度条添加到文件输入_Javascript_Jquery_Html_Css

Javascript 将进度条添加到文件输入

javascript jquery html css

Javascript 将进度条添加到文件输入,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我想用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="fi

我想用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>


选择要上载的文件：

我最近有一个项目，我应该做同样的事情。就像你可能做的那样，我浏览了很多插件，发现

dmUploader

插件特别有用。它允许您通过拖放以及

input

tag来获取图像。插件是可用的

我在中创建了一个工作示例，我认为这是学习如何使用此插件的最佳方法。正如您可能注意到的，从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>

该变量只是一个占位符，用于存储图像的dataURL，以便在上载完成后显示。如果使用MVC，您必须在php或controller中将

url

更改为

.php

文件。您还可以使用

extraData

方法添加额外数据

dmUploader

为您提供了不同的回调函数。它们非常不言自明。例如，

onUploadProgress

是您可以获取上传百分比并在进度栏中显示的地方，

onNewFile

是您可以显示进度栏并以dataURL格式读取图像以在HTML标记中显示的地方，最重要的是，

onComplete

，上传完成后，您可以做任何想做的事情。这就是我调用

addPic

函数的地方，我编写该函数是为了在输入框顶部显示上传的图片

为了简短起见，我不会在这里解释或复制

addPic

函数。顺便说一下，这很容易理解。差不多就是这样。现在你可以有你的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);
        }
    });
});