所有标记都必须包含在表单中,这是表单的标记:
<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"> </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 核心,则必须将其包含在内。
<!
<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上传是必要的。
<!
<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>
其余的文件都是与插件本身相关的核心文件。
<!
<script src="js/jquery.fileupload.js"></script>
<!
<script src="js/jquery.fileupload-fp.js"></script>
<!
<script src="js/jquery.fileupload-ui.js"></script>
这个有点难以理解。本地化处理语言差异。
<!
<script src="js/locale.js"></script>
最后,这是我们代码的精华部分。Main.js处理我们所有的脚本执行和条件判断。这是您需要熟悉的文件。如果您检查他们的页面,您会看到所有正在进行的事情。简单的复制+粘贴就可以了;但是,您需要更改此脚本内的URL值以与您计划使用的服务器匹配。
<!
<script src="js/main.js"></script>
祝你好运。