做毕业设计,前端主要采用Boostrap,想做个视频上传的功能,又想漂亮点的所以采用了第三方的开源框架BootStrapFileInput
官方Demo:http://plugins.krajee.com/file-input-ajax-demo/5
github:https://github.com/kartik-v
首先看了大神http://www.cnblogs.com/wuhuacong/p/4774396.html的博文,足足琢磨了一个多小时,嫩是没看懂文中有几点没说清楚:
上传成功后,服务器返回什么格式的数据?
点击删除时,服务器能接收到上传成功返回数据中的某值,删除服务器文件?
终于在http://plugins.krajee.com/file-input#option-previewsettings找了答案:里头都有详细说明
历经种种错误与尝试后终于取得了成功:
$(function(){
$("#imageUpload").fileinput({
showCaption: false,
language: 'zh',
enctype: 'multipart/form-data',
uploadUrl: '${basePath}fileupload?action=videoUpload', //上传的地址
allowedFileExtensions : ['flv', 'swf', 'mkv', 'avi', 'rm', 'rmvb', 'mpeg', 'mpg', 'ogg', 'ogv', 'mov', 'wmv', 'mp4', 'webm', 'mp3'],//接收的文件后缀
initialPreviewAsData: false //配置上传后是否显示预览
}).on('fileuploaded',
function(event, data, id, index) {
var fname = data.files[index].name;
var out = '' + '文件 # ' + (index + 1) + ' - ' + fname + ' 已经成功上传.' + ' ';
$('#content').attr("value",data.response.videoUrl);//获得后台返回名为videoUrl的json数据
$('#kv-success-1').append(out);
$('#kv-success-1').fadeIn('slow');
});
});
如果需要配置 initialPreviewAsData = true 具体可参照:http://plugins.krajee.com/file-input-ajax-demo/5
后台返回的Json 格式数据要是这种格式的:
{
"videoUrl": "