[英]jQuery Fileupload (Blueimp) with AngularJS and Spring MVC
I'm new to the web development and I'm currently trying to implement a simple file upload for tests purpose. 我是Web开发的新手,目前正在尝试实现用于测试目的的简单文件上传。
To sum up, my goal is simply to reproduce this : http://blueimp.github.io/jQuery-File-Upload/angularjs.html with Java server side. 综上所述,我的目标仅仅是复制以下内容:Java服务器端的http://blueimp.github.io/jQuery-File-Upload/angularjs.html 。
Using the jQuery Fileupload plugin and AngularJS I want to make an UI to upload files on a server. 使用jQuery Fileupload插件和AngularJS,我想创建一个UI以在服务器上上传文件。 On the server side I'm using Java and Spring MVC to handle HTTP requests.
在服务器端,我使用Java和Spring MVC来处理HTTP请求。
However, I'm currently unable to make it works, surely because I don't know what kind of HTTP requests I should handle when using jQuery Fileupload with AngularJS, and the Blueimp documentation did not help me (probably my bad, it's maybe something well-known when you are working with this kind of frameworks). 但是,我目前无法使其正常运行,肯定是因为我不知道在将AngularJS与jQuery Fileupload一起使用时应该处理哪种HTTP请求,而Blueimp文档并没有帮助我(可能是我的错,这可能是某件事在使用这种框架时众所周知)。
Here is my current AngularJS controller file (it's basically a copy of the one given with the AngularJS example) : 这是我当前的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);
};
}
}
]);
}());
In my view I have a form with data-ng-app="file-upload"
and data-ng-controller="FileUploadController"
. 在我看来,我有一个带有
data-ng-app="file-upload"
和data-ng-controller="FileUploadController"
的表单。
And here is my current Spring controller : 这是我当前的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;
}
}
When I use Firebug to test my view, I get the following error : "NetworkError: 405 Method Not Allowed - http://localhost:8080/ExerciseValidator/upload/ " 当我使用Firebug测试视图时,出现以下错误:“ NetworkError:405方法不允许-http:// localhost:8080 / ExerciseValidator / upload / ”
And nothing happens when I try to upload a file: I can select a file in my hard drive, but it is not shown in the list of files that can be uploaded. 当我尝试上传文件时,什么也没有发生:我可以在硬盘驱动器中选择一个文件,但是它没有显示在可以上传的文件列表中。
I also tried to add a handler for the GET method on /upload/ in my Spring controller. 我还尝试在Spring控制器中的/ upload /上为GET方法添加处理程序。 But even though it get rid of the 405 error, I don't know what should I do with this request.
但是,即使它摆脱了405错误,我也不知道该处理该怎么办。 Moreover, I did not notice any improvement in the UI: the list of uploadable files did not show up.
此外,我没有注意到用户界面的任何改进:可上传文件列表未显示。
Does anyone have an idea of what should I do ? 有谁知道我该怎么办?
In the Javascript file, the controller was defined with the name FileUploadController, but this controller's name is already defined in jquery.fileupload-angular.js. 在Javascript文件中,控制器的名称为FileUploadController,但该控制器的名称已在jquery.fileupload-angular.js中定义。 Changing it to InternalFileUploadController (for instance) solved the problem.
将其更改为InternalFileUploadController(例如)解决了该问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.