springmvc帶檔案上傳的form表單提交,用 jquery的ajaxfileupload或使用dropzone上傳圖文詳解
阿新 • • 發佈:2019-01-30
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page session="false"%>
<%@page pageEncoding="utf-8" contentType="text/html;charset=utf-8"%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/dropzone/dropzone.min.js"></script>
<link href="<%=request.getContextPath() %>/js/dropzone/dropzone.min.css" type="text/css" rel="stylesheet" />
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>Insert title here</title>
</head>
<body class="component-register">
<form id="my-awesome-dropzone" class="dropzone">
<div class="dropzone-previews"></div>
<input type="text" name="username" />
</br>
<input type="text" name="password" />
<button type="submit">Submit data and files!</button>
</form>
<script type="text/javascript">
Dropzone.options.myAwesomeDropzone = { // The camelized version of the ID of the form element
// The configuration we've talked about above
url: "<%=request.getContextPath() %>/upphoto",
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 100,
maxFiles: 100,
paramName : "myfile",//注意**後臺根據這個配置引數獲得檔案MultipartFile multipartFile = multipartRequest.getFile("myfile");
uploadMultiple: false,
// The setting up of the dropzone
init: function() {
var myDropzone = this;
// First change the button to actually tell Dropzone to process the queue.
this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {
// Make sure that the form isn't actually being sent.
e.preventDefault();
e.stopPropagation();
myDropzone.processQueue();
});
// Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
// of the sending event because uploadMultiple is set to true.
this.on("sendingmultiple", function() {
// Gets triggered when the form is actually being sent.
// Hide the success button or the complete form.
});
this.on("successmultiple", function(files, response) {
// Gets triggered when the files have successfully been sent.
// Redirect user or notify of success.
});
this.on("errormultiple", function(files, response) {
// Gets triggered when there was an error sending the files.
// Maybe show form again, and notify user of error
});
}
}
</script>
</body>
</html>