使用jQuery-File-Upload插件创建上传按钮和进度条

Question

使用jQuery-File-Upload插件创建上传按钮和进度条

4

我正在尝试使用jQuery File Upload插件在ajax表单中上传一些文件。我试图遵循"Basic" plugin的说明，但文档有点稀少。

我没有看到任何创建“开始上传”按钮的方法。我也不太明白如何为单个上传设置进度条。我看到我可以在add回调中设置data.context，但如果data.files中有多个文件，那么它是如何工作的？

- Bounderby

我用了这个插件一段时间，但我觉得它很受限制。我转而使用https://github.com/johnlanz/jquery-fileuploader-codeigniter，它更容易处理。如果你觉得jQuery-File-Upload很难使用，可以考虑一下这个选择。 - Motive

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ohgodwhy · Accepted Answer

所有标记都必须包含在表单中，这是表单的标记：

<form id="fileupload" action="/path/to/your/controller/ext" method="POST" type="multiplart/form-data">...everything below this goes in here </form>

这是创建“开始上传”按钮的标记语言。

<button class="btn btn-primary start" type="submit">
    <span>Start upload</span>
</button>

这是创建“添加文件”按钮的标记语言代码。

<span class="btn btn-success fileinput-button">
   <span>Add files...</span>
   <input type="file" multiple="" name="files[]">
</span>

这里是创建“取消上传”按钮的标记语言代码。

<button class="btn btn-warning cancel" type="reset">
    <span>Cancel upload</span>
</button>

这里是创建“删除”按钮的标记代码。

<button class="btn btn-danger delete" type="button">
    <span>Delete</span>
</button>

这是显示单个文件进度的标记。每个文件都是同步处理的，这意味着此进度条将始终显示当前排队文件的进度。请参考以下代码：currently queued file.

<div class="span5 fileupload-progress fade">
    <!-- The global progress bar -->
    <div aria-valuemax="100" aria-valuemin="0" role="progressbar" class="progress progress-success progress-striped active">
        <div style="width:0%;" class="bar"></div>
    </div>
    <!-- The extended global progress information -->
    <div class="progress-extended">&nbsp;</div>
</div>

这是用于在处理文件数据时保存数据的HTML代码。

<table class="table table-striped" role="presentation">
    <tbody data-target="#modal-gallery" data-toggle="modal-gallery" class="files"></tbody>
 </table>

您可以看到这是一个标准的“提交”按钮。它将被用于处理我们的表格。当您单击它时，表格将尝试上传所有文件部分。

进度条的HTML代码，如上述代码所示..

<div id="progress">
    <div class="bar" style="width: 0%;"></div>
</div>

$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result, function (index, file) {
                $('<p/>').text(file.name).appendTo(document.body);
             });
        },
        progressall: function (e, data) {
           var progress = parseInt(data.loaded / data.total * 100, 10);
           $('#progress .bar').css(
               'width',
               progress + '%'
           );
        }
   });
});

根据该网站，每个JavaScript文件都有关于其功能和要求的注释。让我们分解一下。

jQuery

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
//We need the jQuery core. No need for an explanation.

jQuery UI Widget 在 IT 技术中得到广泛应用，如果我们尚未包含 jQuery UI 核心或 jQuery UI.widget 核心，则必须将其包含在内。

<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
<script src="js/vendor/jquery.ui.widget.js"></script>

有一个模板工厂插件，可用于在将元素拖放/添加到列表时自动生成元素。您需要包含此插件。

<!-- The Templates plugin is included to render the upload/download listings -->
<script src="http://blueimp.github.com/JavaScript-Templates/tmpl.min.js"></script>

你想调整大小并预览图像吗？我敢打赌你想。

<!-- The Load Image plugin is included for the preview images and image resizing functionality -->
<script src="http://blueimp.github.com/JavaScript-Load-Image/load-image.min.js"></script>

这是针对HTML5 Canvas to Blob支持的。它保持与上述相似的功能，但对于HTML5上传是必要的。

<!-- The Canvas to Blob plugin is included for image resizing functionality -->
<script src="http://blueimp.github.com/JavaScript-Canvas-to-Blob/canvas-to-blob.min.js"></script>

这个很好理解，我们不需要这些内容，但是他在演示中使用了它们。

<!-- Bootstrap JS and Bootstrap Image Gallery are not required, but included for the demo -->
<script src="http://blueimp.github.com/cdn/js/bootstrap.min.js"></script>
<script src="http://blueimp.github.com/Bootstrap-Image-Gallery/js/bootstrap-image-gallery.min.js"></script>

如果浏览器不支持XHR文件上传，则我们会使用后台的iFrame来模拟功能。您需要这个来支持浏览器。

<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="js/jquery.iframe-transport.js"></script>

其余的文件都是与插件本身相关的核心文件。

<!-- The basic File Upload plugin -->
<script src="js/jquery.fileupload.js"></script>

<!-- The File Upload file processing plugin -->
<script src="js/jquery.fileupload-fp.js"></script>

<!-- The File Upload user interface plugin -->
<script src="js/jquery.fileupload-ui.js"></script>

这个有点难以理解。本地化处理语言差异。

<!-- The localization script -->
<script src="js/locale.js"></script>

最后，这是我们代码的精华部分。Main.js处理我们所有的脚本执行和条件判断。这是您需要熟悉的文件。如果您检查他们的页面，您会看到所有正在进行的事情。简单的复制+粘贴就可以了；但是，您需要更改此脚本内的URL值以与您计划使用的服务器匹配。

<!-- The main application script -->
<script src="js/main.js"></script>

祝你好运。