Question

我正在尝试使用jQuery File Upload插件以ajax形式上传某些文件。我正在尝试遵循"Basic" plugin的说明，但文档有点稀疏。

我看不到任何创建“开始上传”按钮的方法。我也不太了解如何设置单个上传的进度条。我看到我可以在data.context回调中设置add，但如果data.files中有多个文件，那该怎么办？

Answer 1

所有标记必须以表格形式包装，这是表格的标记。

<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，如果**我们还没有包含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>

祝你好运。

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

1 个答案: