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

import org.apache.commons.fileupload.FileItem;  

import org.apache.commons.fileupload.disk.DiskFileItemFactory;  

import org.apache.commons.fileupload.servlet.ServletFileUpload;  

  

public class EntityServlet1 extends HttpServlet {  

  

    private static final long serialVersionUID = 1L;  

    private String uploadPath = "D:\\temp"; // 上传文件的目录  

    File tempPathFile;  

  

    // 重写doPost方法，处理事件识别请求  

    protected void doPost(HttpServletRequest request,  

            HttpServletResponse response) throws ServletException, IOException {  

        try {  

            // Create a factory for disk-based file items  

            DiskFileItemFactory factory = new DiskFileItemFactory();  

  

            // Set factory constraints  

            factory.setSizeThreshold(4096); // 设置缓冲区大小，这里是4kb  

            factory.setRepository(tempPathFile);// 设置缓冲区目录  

  

            // Create a new file upload handler  

            ServletFileUpload upload = new ServletFileUpload(factory);  

  

            // Set overall request size constraint  

            upload.setSizeMax(4194304); // 设置最大文件尺寸，这里是4MB  

  

            List<FileItem> items = upload.parseRequest(request);// 得到所有的文件  

            Iterator<FileItem> i = items.iterator();  

            while (i.hasNext()) {  

                FileItem fi = (FileItem) i.next();  

                String fileName = fi.getName();  

                if (fileName != null) {  

                    File fullFile = new File(new String(fi.getName().getBytes(), "utf-8")); // 解决文件名乱码问题  

                    File savedFile = new File(uploadPath, fullFile.getName());  

                    fi.write(savedFile);  

                }  

            }  

            System.out.print("upload succeed");  

        } catch (Exception e) {  

  

        }  

    }  

}  

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

这个是他的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
然后 感谢网络上那些 前辈 大牛们的分享  谢谢