将进度条添加到文件输入

Question

I want to add a simple progress bar to this html with jquery, what is the most minimalistic way to do so? 我想用jquery向这个html添加一个简单的进度条，最简单的方法是什么？ I just need a percent value and a progress bar. 我只需要一个百分比值和一个进度栏。

<!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

I recently had a project which I was supposed to do the samething. 我最近有一个我应该做的项目。 As you probably did, I went through lots of plugins and I found dmUploader plugin particularly useful. 正如您可能所做的那样，我经历了很多插件，发现dmUploader插件特别有用。 It allows you fetching the image by drag and drop as well as input tag. 它允许您通过拖放以及input标签来获取图像。 The plugin is available HERE . 该插件在这里可用。

I have created a working example in CODEPEN , which I think is the best way to learn how to use this plugin. 我在CODEPEN中创建了一个工作示例，我认为这是学习如何使用此插件的最佳方法。 As you might notice, lines of jQuery code from 1 through 290 are just the plugin itself. 您可能会注意到，从1到290的jQuery代码行仅仅是插件本身。 I had to paste it there since the plugin does not have CDN link. 由于插件没有CDN链接，我不得不将其粘贴到此处。 Let's go through the codes: 让我们看一下代码：

HTML 的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>

You need a container div, called SciSecPic in this example, a label which contains span and input tags inside. 你需要一个div容器，被称为SciSecPic在这个例子中， label包含span和input标签内。 Remember the input is hidden and your button is your span tag. 记住input是隐藏的，您的按钮是您的span标签。 This is just how this plugin works. 这就是此插件的工作方式。 Then you can have your progress bar, div with progress class, which in this case is a Bootstrap progress bar. 然后，您可以拥有进度条，div为progress类，在本例中为Bootstrap进度条。 It primarily is not displayed and only will be shown when uploading is in progress. 它主要不显示，仅在上载过程中显示。

There is no special setting required for CSS so I will skip that part and refer you to the working example. CSS不需要特殊的设置，因此我将跳过该部分并向您介绍该工作示例。

jQuery - Setting dmUploader 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);
        }
    });
});

The variable is just a placeholder to store dataURL of the image to show later, when uploading is completed. 该变量只是一个占位符，用于存储图像的dataURL，以便在上传完成后显示。 What necessarily is happening that you have to change url to the .php file in PHP or controller if you use MVC. 如果使用MVC，必须将url更改为PHP或控制器中的.php文件。 You also can add extra data using extraData method. 您还可以使用extraData方法添加额外的数据。 dmUploader provides you with different callback functions. dmUploader为您提供了不同的回调函数。 They are very much self explanatory. 他们非常自我解释。 For instance, onUploadProgress is where you can get the upload percentage and show it in the progress bar, onNewFile is where you can show your progress bar and to read the image in dataURL format to show it on the go in your HTML markup, and most importantly onComplete where you can do whatever you want after upload is finished. 例如， onUploadProgress是您可以获取上传百分比并在进度条中显示的地方， onNewFile是您可以显示进度条并以dataURL格式读取图像以在HTML标记中随时显示的地方，重要的是onComplete ，您可以在上传完成后执行任何操作。 This is where I called addPic function that I wrote to show the uploaded picture on top of the input box. 我在这里调用了addPic函数，该函数的编写目的是在输入框顶部显示上传的图片。

To keep this answer short, I will not explain or copy addPic function here. 为简短addPic ，我将在这里不解释或复制addPic函数。 IT is very simple to understand by the way. 顺便说一句，IT很容易理解。 That's pretty much it. 就是这样。 Now you can have your dmUploader. 现在，您可以拥有dmUploader。

将进度条添加到文件输入

问题描述

1 个解决方案

解决方案1
0 2016-01-31 02:31:02

将进度条添加到文件输入

问题描述

1 个解决方案

解决方案1 0 2016-01-31 02:31:02

解决方案1
0 2016-01-31 02:31:02