[英]jQuery Fileupload (Blueimp) with AngularJS and Spring MVC
我是Web开发的新手,目前正在尝试实现用于测试目的的简单文件上传。
综上所述,我的目标仅仅是复制以下内容:Java服务器端的http://blueimp.github.io/jQuery-File-Upload/angularjs.html 。
使用jQuery Fileupload插件和AngularJS,我想创建一个UI以在服务器上上传文件。 在服务器端,我使用Java和Spring MVC来处理HTTP请求。
但是,我目前无法使其正常运行,肯定是因为我不知道在将AngularJS与jQuery Fileupload一起使用时应该处理哪种HTTP请求,而Blueimp文档并没有帮助我(可能是我的错,这可能是某件事在使用这种框架时众所周知)。
这是我当前的AngularJS控制器文件(基本上是AngularJS示例给出的文件的副本):
/* jshint nomen:false */
/* global window, angular */
(function () {
'use strict';
var url = '/ExerciseValidator/upload/';
angular.module('file-upload', ['blueimp.fileupload'])
.config([
'$httpProvider', 'fileUploadProvider',
function ($httpProvider, fileUploadProvider) {
delete $httpProvider.defaults.headers.common['X-Requested-With'];
fileUploadProvider.defaults.redirect = window.location.href.replace(
/\/[^\/]*$/,
'/cors/result.html?%s'
);
angular.extend(fileUploadProvider.defaults, {
// Enable image resizing, except for Android and Opera,
// which actually support image resizing, but fail to
// send Blob objects via XHR requests:
disableImageResize: /Android(?!.*Chrome)|Opera/
.test(window.navigator.userAgent),
maxFileSize: 999000,
acceptFileTypes: /(\.|\/)(c|cpp|h|hpp)$/i
});
}
])
.controller('FileUploadController', [
'$scope', '$http', '$filter', '$window',
function ($scope, $http) {
$scope.options = {
url: url
};
$scope.loadingFiles = true;
$http.get(url)
.then(
function (response) {
$scope.loadingFiles = false;
$scope.queue = response.data.files || [];
},
function () {
$scope.loadingFiles = false;
}
);
}
])
.controller('FileDestroyController', [
'$scope', '$http',
function ($scope, $http) {
var file = $scope.file,
state;
if (file.url) {
file.$state = function () {
return state;
};
file.$destroy = function () {
state = 'pending';
return $http({
url: file.deleteUrl,
method: file.deleteType
}).then(
function () {
state = 'resolved';
$scope.clear(file);
},
function () {
state = 'rejected';
}
);
};
} else if (!file.$cancel && !file._index) {
file.$cancel = function () {
$scope.clear(file);
};
}
}
]);
}());
在我看来,我有一个带有data-ng-app="file-upload"
和data-ng-controller="FileUploadController"
的表单。
这是我当前的Spring控制器:
@Controller
public class ExerciseValidatorController {
private static final String OUTPUT_FILEPATH = "D:/tmp/";
private final LinkedList<FileMeta> files = new LinkedList<>();
/**
* Called on index page, returns the file upload page
* @return the file upload page
*/
@RequestMapping(value = "/", method = RequestMethod.GET)
public String showExerciseValidator() {
return "FileUploadView";
}
/**
* Called when files are uploaded, write them to disk and call the validation page
* @param request the request
* @param response the response
* @return TBD
*/
@RequestMapping(value="/upload/", method = RequestMethod.POST)
public @ResponseBody
LinkedList<FileMeta> postUpload(HttpServletRequest request, HttpServletResponse response) {
if(!(request instanceof MultipartHttpServletRequest)) {
return null;
}
Iterator<String> itr = ((MultipartHttpServletRequest)request).getFileNames();
MultipartFile mpf = null;
while (itr.hasNext()) {
mpf = ((MultipartHttpServletRequest)request).getFile(itr.next());
final FileMeta fileMeta = new FileMeta();
fileMeta.setFileName(mpf.getOriginalFilename());
fileMeta.setFileSize(mpf.getSize() / 1024 + " kB");
fileMeta.setFileType(mpf.getContentType());
try {
fileMeta.setBytes(mpf.getBytes());
FileCopyUtils.copy(mpf.getBytes(), new FileOutputStream(OUTPUT_FILEPATH + mpf.getOriginalFilename()));
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
files.add(fileMeta);
}
return files;
}
}
当我使用Firebug测试视图时,出现以下错误:“ NetworkError:405方法不允许-http:// localhost:8080 / ExerciseValidator / upload / ”
当我尝试上传文件时,什么也没有发生:我可以在硬盘驱动器中选择一个文件,但是它没有显示在可以上传的文件列表中。
我还尝试在Spring控制器中的/ upload /上为GET方法添加处理程序。 但是,即使它摆脱了405错误,我也不知道该处理该怎么办。 此外,我没有注意到用户界面的任何改进:可上传文件列表未显示。
有谁知道我该怎么办?
在Javascript文件中,控制器的名称为FileUploadController,但该控制器的名称已在jquery.fileupload-angular.js中定义。 将其更改为InternalFileUploadController(例如)解决了该问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.