使用fileinput与angularjs上传文件

目录

文件准备

首先必要的是引入fileinput的相关js和cs文件

<link type="text/css" rel="stylesheet" href="css/fileinput.css" /><script src=" js/fileinput.js"></script><script  src=" js/fileinput_locale_zh.js"></script><script src="jquery.min.js"></script><script src="angular.js"></script> 

form表单的代码：

<input id="fileupload" type="file"class="file-loading ">

angular的代码：

页面你拖拽了文件之后点击上传就行，

//这一段代码是必须和页面同时加载的,否则页面会出现空白，所以需要再进行一次封装，参考最后的目录angular.element("#fileupload").fileinput({language : 'zh',//中文化uploadUrl : "localhost：8080/find/fileUpload", //服务器地址allowedFileExtensions : [ 'xlsx' ], // 允许的类型maxFileSize : 2000,//文件的最大sizemaxFileCount: 1, //表示允许同时上传的最大文件个数，配置只一个enctype: 'multipart/form-data',});//上传之后服务器传回的信息，判断是否上传成功angular.element("#fileupload").on('fileuploaded',function(e,data){   // 注意 data.response 才是你服务器传回的数据，不是data   var resp=data.response;   if(resp.code>0){      alert('上传成功');   }else{      alert('上传不成功');   }});

服务器端代码：

采用最原始的HttpServletRequest去获取文件

@RequestMapping( name="find/fileUpload"  )@ResponseBody    public ResultData springUpload(HttpServletRequest request) throws IllegalStateException, IOException    {          //将当前上下文初始化给  CommonsMutipartResolver （多部分解析器）        CommonsMultipartResolver multipartResolver=new CommonsMultipartResolver(                request.getSession().getServletContext());        //检查form中是否有enctype="multipart/form-data"        if(multipartResolver.isMultipart(request))        {            //将request变成多部分request            MultipartHttpServletRequest multiRequest=(MultipartHttpServletRequest)request;           //获取multiRequest 中所有的文件名            Iterator iter=multiRequest.getFileNames();            while(iter.hasNext())            {                //一次遍历所有文件                MultipartFile file=multiRequest.getFile(iter.next().toString());                if(file!=null)                {                // 你自己的逻辑操作                    String path="E:/springUpload"+file.getOriginalFilename();                    //上传                    file.transferTo(new File(path));                }            }        }         ResultData rd=new ResultData("1000","上传成功");        return  rd;     }

angular自启动函数写法

第一种

 (function() {     function logger() { 需要dom加载之后，自动执行的函数}})();

第二种

<div ng-controller="test">     <div data-ng-init="load()" >            // 你需要初始化的代码      </div></div>myapp.controller('test', ['$scope',     function($scope) {        $scope.load = function() {             alert('code here');        }}]);