独角兽企业重金招聘Python工程师标准>>>
首先要说明的是我是在Spring Boot和guns框架的基础上使用jQuery-File-Upload-master的插件来实现进度条的。
第一：该插件必须要导入的css,js有
<link rel="stylesheet" href="${ctxPath}/static/css/file/bootstrap.min.css">
<link rel="stylesheet" href="${ctxPath}/static/css/file/style.css">
<link rel="stylesheet" href="${ctxPath}/static/css/file/jquery.fileupload.css">
<link rel="stylesheet" href="${ctxPath}/static/css/file/jquery.fileupload-ui.css">
<script src="${ctxPath}/static/js/file/jquery.iframe-transport.js"></script>
<script src="${ctxPath}/static/js/file/jquery.fileupload.js"></script>
<script src="${ctxPath}/static/js/file/jquery.fileupload-process.js"></script>
<script src="${ctxPath}/static/js/file/jquery.fileupload-image.js"></script>
<script src="${ctxPath}/static/js/file/jquery.fileupload-audio.js"></script>
<script src="${ctxPath}/static/js/file/jquery.fileupload-video.js"></script>
<script src="${ctxPath}/static/js/file/jquery.fileupload-validate.js"></script>
<script src="${ctxPath}/static/js/file/jquery.fileupload-ui.js"></script>
<script src="${ctxPath}/static/js/file/main.js"></script>
<script src="${ctxPath}/static/js/file/cors/jquery.xdr-transport.js"></script>
第二：要先了解spring boot和guns框架，然后找到视频上传管理点击添加，出现文件上传和一些其他你需要的字段，下面的页面使用Beetl引擎和HTML5 内联框架iFrame
@layout("/common/_container.html"){<div class="float-e-margins"><!--ibox--><div class=""><!--ibox-content--><div class="container"><!--form-horizontal--><input type="hidden" id="id" value=""><form id = "fileupload" method = "POST" enctype="multipart/form-data" action="/videoUpload" target="hidden_frame"><div class="row fileupload-buttonbar col-lg-7"><div class="col-lg-7">类型 <input id="videoType" name="videoType"/><br/>简介 <input id="videoIntroduce" name="videoIntroduce"/><br/>类别 <input id="videoClass" name="videoClass"/><br/><span class="btn btn-success fileinput-button"><i class="glyphicon glyphicon-plus"></i><span>添加文件...</span><input type="file" name="files" multiple></span><button type="submit" class="btn btn-primary start"><i class="glyphicon glyphicon-upload"></i><span>开始上传</span></button><button type="reset" class="btn btn-warning cancel"><i class="glyphicon glyphicon-ban-circle"></i><span>取消上传</span></button><button type="button" class="btn btn-danger delete"><i class="glyphicon glyphicon-trash"></i><span>删除</span></button><input type="checkbox" class="toggle"><!--全局文件处理状态--><span class="fileupload-process"></span></div><div class="fileupload-progress fade" ><div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div><div class="progress-extended"> </div></div></div><!--列出可用于上传/下载的文件的表格--><table role="presentation" class="table table-striped"><tbody class="files"></tbody></table><div class="row btn-group-m-t"><div class="col-sm-10"><#button btnCss="info" name="提交" id="ensure" icon="fa-check" clickFun="VideoInfoDlg.addSubmit()"/><#button btnCss="danger" name="取消" id="cancel" icon="fa-eraser" clickFun="VideoInfoDlg.close()"/></div></div></form></div></div></div>
<!--显示可用于上传的文件模板--><script id="template-upload" type="text/x-tmpl">{% for (var i=0, file; file=o.files[i]; i++) { %}<tr class="template-upload fade"><td><span class="preview"></span></td><td><p class="name">{%=file.name%}</p><strong class="error text-danger"></strong></td><td><p class="size">Processing...</p><div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div></td><td>{% if (!i && !o.options.autoUpload) { %}<button class="btn btn-primary start" disabled><i class="glyphicon glyphicon-upload"></i><span>Start</span></button>{% } %}{% if (!i) { %}<button class="btn btn-warning cancel"><i class="glyphicon glyphicon-ban-circle"></i><span>Cancel</span></button>{% } %}</td></tr>{% } %}</script>
<!--提供可下载的文件的模板--><script id="template-download" type="text/x-tmpl">{% for (var i=0, file; file=o.files[i]; i++) { %}<tr class="template-download fade"><td><span class="preview">{% if (file.thumbnailUrl) { %}<a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery><img src="{%=file.thumbnailUrl%}"></a>{% } %}</span></td><td><p class="name">{% if (file.url) { %}<a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>{% } else { %}<span>{%=file.name%}</span>{% } %}</p>{% if(file=="" || file==null){ %}{% if (file.error) { %}<div><span class="label label-danger">请选择文件</span> {%=file.error%}</div>{% } %}{% } %}{% if(file.success){ %}<div><span class="label label-success">上传成功</span> {%=file.success%}</div>{% } %}</td><td><span class="size">{%=o.formatFileSize(file.size)%}</span></td><td>{% if (file.deleteUrl) { %}<button class="btn btn-danger delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}><i class="glyphicon glyphicon-trash"></i><span>删除</span></button><input type="checkbox" name="delete" value="1" class="toggle">{% } else { %}<button class="btn btn-warning cancel"><i class="glyphicon glyphicon-ban-circle"></i><span>取消</span></button>{% } %}</td></tr>{% } %}</script>
<script src="${ctxPath}/static/modular/system/video/video_info.js"></script><script src="${ctxPath}/static/js/file/jquery.iframe-transport.js"></script><script src="${ctxPath}/static/js/file/jquery.fileupload.js"></script><script src="${ctxPath}/static/js/file/jquery.fileupload-process.js"></script><script src="${ctxPath}/static/js/file/jquery.fileupload-image.js"></script><script src="${ctxPath}/static/js/file/jquery.fileupload-audio.js"></script><script src="${ctxPath}/static/js/file/jquery.fileupload-video.js"></script><script src="${ctxPath}/static/js/file/jquery.fileupload-validate.js"></script><script src="${ctxPath}/static/js/file/jquery.fileupload-ui.js"></script><script src="${ctxPath}/static/js/file/main.js"></script><script src="${ctxPath}/static/js/file/cors/jquery.xdr-transport.js"></script>@}
**第三：在jquery-file-upload插件中有一个main.js是需要改动的，当函数不作为对象的属性被调用时，也就是我们常说的普通函数方式，此时的this总是指向全局对象，在ECMAScript4的strict模式下，这种情况下的this已经被规定为不会指向全局对象，而是undifined，就是下面的"user strict"。重点在"#fileupload" id要和表单from的id一致 **
$(function () {'use strict';// Initialize the jQuery File Upload widget://初始化jQuery文件上传小部件：$('#fileupload').fileupload({// Uncomment the following to send cross-domain cookies://为true取消以下内容发送跨域cookie：xhrFields: {withCredentials: false},url: '/videoUpload'});// Enable iframe cross-domain access via redirect option://通过重定向选项启用iframe跨域访问：/*$('#fileupload').fileupload('option','redirect',window.location.href.replace(/\/[^\/]*$/,'/cors/result.html?%s'));*/console.log(window.location.hostname);if (window.location.hostname === 'blueimp.github.io') {// Demo settings://演示设置：/*$('#fileupload').fileupload('option', {/!*url: '//jquery-file-/',*!/url: '/videoUpload',// Enable image resizing, except for Android and Opera,//启用图像调整，除了Android和Opera// which actually support image resizing, but fail to//这实际上支持图像调整，但不能// send Blob objects via XHR requests://通过XHR请求发送Blob对象:disableImageResize: /Android(?!.*Chrome)|Opera/.test(window.navigator.userAgent),maxFileSize: 999000,acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i});*/// Upload server status check for browsers with CORS support://为带有CORS支持的浏览器上传服务器状态检查：/*if ($.support.cors) {$.ajax({url: '/videoUpload',type: 'HEAD'}).fail(function () {$('<div class="alert alert-danger"/>').text('Upload server currently unavailable - ' +new Date()).appendTo('#fileupload');});}*/} else {// Load existing files:$('#fileupload').addClass('fileupload-processing');$.ajax({// Uncomment the following to send cross-domain cookies://为true取消以下内容发送跨域cookiexhrFields: {withCredentials: false},url: $('#fileupload').fileupload('option', 'url'),dataType: 'json',context: $('#fileupload')[0]}).always(function () {$(this).removeClass('fileupload-processing');}).done(function (result) {$(this).fileupload('option', 'done').call(this, $.Event('done'), {result: result});});}});
