1. 程式人生 > >springmvc帶檔案上傳的form表單提交,用 jquery的ajaxfileupload或使用dropzone上傳圖文詳解

springmvc帶檔案上傳的form表單提交,用 jquery的ajaxfileupload或使用dropzone上傳圖文詳解

<%@ 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>