文件上传组件fileinput的使用

2019独角兽企业重金招聘Python工程师标准>>>

1.引入相应的css,js文件。注意jquery,bootstrap,fileinput之间的版本，有些版本之间不兼容会无效果，最好使用官网例子使用的版本。

2.html代码

  	

  		

  			

  				×
  				
文件上传
  			
  			

  				

  					选择文件
					
					
	  				

  				
  				

				  ×
				  提示: 请选择文件并上传文件后再保存
				
  			
  			

  				保存
  			
  		
  	
  

3.js代码

$('#projectfile').fileinput({
        language: 'zh',
        uploadUrl: $("#contextPath").val() + "/admin/permissions/user/upload",
        allowedFileExtensions : ['xlsx', 'xls'],
        showUpload: true,
        fileActionSettings: {showUpload: false}
    });
	//文件上传后执行的方法
	$('#projectfile').on('fileuploaded', function(event, data, previewId, index) {
	    var form = data.form, files = data.files, extra = data.extra,
	        response = data.response, reader = data.reader;
	    $("#uploadFileName").val(response.fileName);
	});

可以通过fileuploaded事件，监听获得文件上传成功后，后台请求返回的数据。

转载于:https://my.oschina.net/u/729917/blog/885430