使用fileinput与angularjs上传文件

最新推荐文章于 2022-05-31 17:13:25 发布

原创最新推荐文章于 2022-05-31 17:13:25 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#angular #angularjs

html基础专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个使用Angular实现文件上传的应用案例，包括必要的文件准备、form表单与Angular代码的编写，以及服务器端处理上传文件的方法。

文件准备

首先必要的是引入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,//文件的最大size
maxFileCount: 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');
        }
}]);