Upload file sử dụng Ajax Jquery và Apache Commons FileUpload

Chào mừng các bạn đã quay trở lại với thachleblog, như đã đề cập ở bài trước, sau khi đọc được file excel, mình cần tìm cách upload file lên server (server deploy app). Do đó, bài viết hôm nay mình sẽ giới thiệu với các bạn cách upload file sử dụng Apache Commons FileUpload. Qua bài viết này, các bạn sẽ hiểu được cách gửi một request có đính kèm 1 (hoặc nhiều) file lên server, đồng thời xử lý ghi file xuống server. Nào, chúng ta cùng bắt đầu nhé.

Để upload file lên server, việc đầu tiên ta cần sử dụng thẻ input file trong html để đính kèm file từ máy local vào request, tiếp theo là gửi request lên server.

<!DOCTYPE html>
<html lang="en">
  <head>
	<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
 
    <title>Dashboard Template for Bootstrap</title>
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  </head>
  <body>
   <div class="container-fluid" >   	  
      <div class="row" style="margin-top: 50px;">      
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">     
          <h2 class="sub-header">Import file</h2>
		  <form id="code" method="post" enctype="multipart/form-data" class="form-horizontal">
			<div class="input-group">
				<input id="file-upload" type="file" name="file-upload">
			</div>
		  </form><br>
		  <button type="button" id="btn-import" class="btn btn-default">Upload</button>		  
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script type="text/javascript">  
	$(document).ready(function() {
		$("#btn-import").click(function() {
			var file = $('#file-upload').get()[0].files[0];
			var fileUpload = $('#file-upload').val();
			if(!file){
				alert("Vui lòng chọn file");
				return;
			}
			if (fileUpload && (fileUpload.indexOf('xlsx') === -1)) {
				alert("Vui lòng chọn file excel");
				return;
			}
 
			$.ajax({
				url: '/fileupload/ajax',
				type: 'POST',
				data: new FormData($('#code')[0]),
				processData: false,
				contentType: false
			}).done(function () {
				alert("Upload thành công");
			});
		});
	});	
  </script>
</html>
 
 
Code html demo cách sử dụng input file và gửi request  sử dụng Ajax Jquery

Lưu ý: ở đây mình sử dụng Ajax để gửi đến server request có đính kèm file excel sử dụng FormData, các bạn có thể tìm hiểu thêm về FormData tại đây. Chi tiết các bạn có thể đọc code ở trên (đính kèm 1 file).

Tiếp theo, ở phần server, chúng ta sẽ sử dụng Apache Commons FileUpload để xử lý request và lưu file xuống server

Các bạn có thể sử dụng maven hoặc download Apache Commons FileUpload tại đây. Lưu ý, để sử dụng Apache Commons FileUpload, cần tải thêm dependencies của nó là Apache Commons IO.

Implement:

package thach.le.fileupload;
 
import java.io.File;
import java.io.IOException;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileItemFactory;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.eclipse.jetty.http.HttpStatus;
 
/**
 *
 * @author thachlp
 */
public class UploadFileController extends HttpServlet {
 
	private static final long serialVersionUID = 1L;
	private static final String UPLOAD_DIRECTORY = "/home/thachlp/Documents/";
 
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		resp.setStatus(HttpStatus.OK_200);
		// Check that we have a file upload request
		boolean isMultipart = ServletFileUpload.isMultipartContent(req);
 
		if (isMultipart) {
			// Create a factory for disk-based file items
			FileItemFactory factory = new DiskFileItemFactory();
			// Create a new file upload handler
			ServletFileUpload upload = new ServletFileUpload(factory);
			try {
				List<FileItem> fileItems = upload.parseRequest(req);
				String pathFile = "";
                                // loop for multi file
				for (FileItem item : fileItems) {
					if (!item.isFormField()) {
						pathFile = UPLOAD_DIRECTORY + File.separator + item.getName();
						item.write(new File(pathFile));
					}
				}
 
			} catch (Exception e) {
			}
		}
 
	}
}

Code demo cách xử lý request có đính kèm file và ghi file sử dụng Apache Commons FileUpload

Các bạn cần sửa lại đường dẫn thư mục cần lưu trữ file cho phù hợp.

Kết quả:

Upload file sử dụng Ajax Jquery và Apache Commons FileUpload

Link tải source code: https://github.com/thachlp/FileUpload
Tham khảo thêm: https://commons.apache.org/proper/commons-fileupload/using.html