angular-file-upload angularJS 文件上传

项目前台用的是angularJS 这个前台框架  在做文件上传的时候就用了这个angular-file-upload 这个插件

与之相同的插件还有 ng-file-upload  两者各有千秋吧  ng-file-upload 感觉会简单点 但是不知到能不能上传视频 所以就用了angular-file-upload

进入正题

直接上代码

前台HTML

<div class="uploading form-group">
    <input class="form-control" ng-model="fileItem.name" readonly/>
    <a href="javascript:;" class="choose-book">
        <input type="file" name="certificate" nv-file-select accept="video/*" uploader="uploader" ng-click="clearItems()"  />
        <input type="file" name="certificate" nv-file-select accept="image/*" uploader="uploader" ng-click="clearItems()" />
    </a>
</div>

其中的accept是限制 稍后会在下面归纳出来 这个是有一个ng-click事件 也就是说 我点击添加文件后他自动上传

accept取值类型列表：

* accept="application/msexcel"

* accept="application/msword"

* accept="application/pdf"

* accept="application/poscript"

* accept="application/rtf"

* accept="application/x-zip-compressed"
 
* accept="audio/basic"

* accept="audio/x-aiff"

* accept="audio/x-mpeg"

* accept="audio/x-pn/realaudio"

* accept="audio/x-waw"

* accept="image/*"

* accept="image/gif"
    
* accept="image/jpeg"

* accept="image/tiff"

* accept="image/x-ms-bmp"

* accept="image/x-photo-cd"

* accept="image/x-png"

* accept="image/x-portablebitmap"

* accept="image/x-portable-greymap"

* accept="image/x-portable-pixmap"

* accept="image/x-rgb"

* accept="text/html"

* accept="text/plain"

* accept="video/quicktime"

* accept="video/x-mpeg2"

* accept="video/x-msvideo"

之后是

后台JS文件 

我们在JS需要引用第三方就是angular-file-upload 给的 js

分别是

<script type="text/javascript" src="../lib/angular/angularFileUpload/angular-file-upload.min.js"></script>
<script type="text/javascript" src="../lib/angular/angularFileUpload/angular-file-upload.js"></script>

这个可以在我上传的资源的源码中 angular-file-upload-master\dist 下面找到这两个js文件

然后我们需要在app上加入

var starter = angular.module('starter', ['ui.router' , "toastr", 'serviceList','filter','directiveList','angularFileUpload'])

因为我们这边是把controller和app分开写所以这样加  

'angularFileUpload'

正常也是这样加。。 哈哈  比较冷的笑话

之后在我们的ctrl中

starter.controller("XXXX", function ($rootScope, $scope,Apis,Util,$state,FileUploader) {

加入

FileUploader

这样你就可以使用fileUoloader

var uploader = $scope.uploader = new FileUploader({
    url:'上传的后台的路径  可以是PHP 也可以用java的后台处理',
    method: 'POST',
    queueLimit: 1,//文件个数
    autoUpload: true

});
uploader.headers['头']= 令牌; //头信息 令牌
$scope.clearItems = function(){    //重新选择文件时，清空队列，达到覆盖文件的效果
    uploader.clearQueue();
}
uploader.onAfterAddingFile = function(fileItem) {
    $scope.fileItem = fileItem._file;    //添加文件之后，把文件信息赋给scope
};
uploader.onSuccessItem = function(fileItem, response, status, headers) {
    $scope.uploadStatus = true;   //上传成功则把状态改为true
    alert(response.path);
};
$scope.UploadFile = function(){
    uploader.uploadAll();
    if(status){
            alert('上传成功！');
    }else{
            alert('上传失败！');
    }
}

因为我这里有过滤器  需要在头信息中添加token 令牌才能过去。。。

如果没有可以不用加

后台java代码 两种方案

第一种 利用 

MultipartHttpServletRequest

/**
     * 文件上传
     * */
    @RequestMapping(value="/test", method = {RequestMethod.GET, RequestMethod.POST} )
    @ResponseBody
    public String ngUpload(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String path = "";
        CommonsMultipartResolver multipartResolver =
                new CommonsMultipartResolver(request.getSession().getServletContext());
        //先判断request中是否包涵multipart类型的数据，
        if(multipartResolver.isMultipart(request)){
            //再将request中的数据转化成multipart类型的数据
            MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
            Iterator iter = multiRequest.getFileNames();
            while(iter.hasNext()){
                //这里的name为fileItem的alias属性值，相当于form表单中name
                String name=(String)iter.next();
                System.out.println("name:"+name);
                //根据name值拿取文件
                MultipartFile file = multiRequest.getFile(name);
                if(file != null){
                    String fileName = file.getOriginalFilename();
                    path = "D:/test/" + fileName;
                    File localFile = new File(path);
                    if(!localFile.getParentFile().exists()) {
                        //如果目标文件所在的目录不存在，则创建父目录
                        localFile.getParentFile().mkdirs();
                    }
                    //写文件到本地
                    try {
                        file.transferTo(localFile);
                    } catch (IOException e) {
                        // TODO Auto-generated catch block
                        e.printStackTrace();
                        return path;
                    }
                }
            }
        }else {

            return path;
        }

        return path;

}

第二种 最常见 利用commons-fileupload

1. import org.apache.commons.fileupload.FileItem;  
2. import org.apache.commons.fileupload.disk.DiskFileItemFactory;  
3. import org.apache.commons.fileupload.servlet.ServletFileUpload;  
4.   
5. public class EntityServlet1 extends HttpServlet {  
6.   
7.     private static final long serialVersionUID = 1L;  
8.     private String uploadPath = "D:\\temp"; // 上传文件的目录  
9.     File tempPathFile;  
10.   
11.     // 重写doPost方法，处理事件识别请求  
12.     protected void doPost(HttpServletRequest request,  
13.             HttpServletResponse response) throws ServletException, IOException {  
14.         try {  
15.             // Create a factory for disk-based file items  
16.             DiskFileItemFactory factory = new DiskFileItemFactory();  
17.   
18.             // Set factory constraints  
19.             factory.setSizeThreshold(4096); // 设置缓冲区大小，这里是4kb  
20.             factory.setRepository(tempPathFile);// 设置缓冲区目录  
21.   
22.             // Create a new file upload handler  
23.             ServletFileUpload upload = new ServletFileUpload(factory);  
24.   
25.             // Set overall request size constraint  
26.             upload.setSizeMax(4194304); // 设置最大文件尺寸，这里是4MB  
27.   
28.             List<FileItem> items = upload.parseRequest(request);// 得到所有的文件  
29.             Iterator<FileItem> i = items.iterator();  
30.             while (i.hasNext()) {  
31.                 FileItem fi = (FileItem) i.next();  
32.                 String fileName = fi.getName();  
33.                 if (fileName != null) {  
34.                     File fullFile = new File(new String(fi.getName().getBytes(), "utf-8")); // 解决文件名乱码问题  
35.                     File savedFile = new File(uploadPath, fullFile.getName());  
36.                     fi.write(savedFile);  
37.                 }  
38.             }  
39.             System.out.print("upload succeed");  
40.         } catch (Exception e) {  
41.   
42.         }  
43.     }  
44. }  

后台还是自己处理 还有很多中方法  主要是起的一手好名字 和 文件路径

这个是他的GitHub 地址 https://github.com/nervgh/angular-file-upload

在我的资源中我也上传了 

然后这个是大牛归纳搞得中文API地址  http://blog.sina.com.cn/s/blog_82cb7a0f0102wngb.html

这个是我在网上找的好的相关文章   http://www.cnblogs.com/jarson-7426/p/5191156.html

然后 感谢网络上那些 前辈 大牛们的分享  谢谢