需要angularjs上传视频到服务器的样例
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="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
<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>
然后在app上加入
var starter = angular.module('starter', ['ui.router' , "toastr", 'serviceList','filter','directiveList','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('上传失败!');
}
}
后台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) {
}
}
}