BootStrap FileInput 插件上传使用

做毕业设计,前端主要采用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": "


    BootStrap FileInput 插件上传使用_第1张图片


    你可能感兴趣的:(前端)