當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

使用Servlet和Bootstrap上传Ajax文件

發(fā)布時間：2023/12/3 编程问答 43 豆豆

生活随笔收集整理的這篇文章主要介紹了使用Servlet和Bootstrap上传Ajax文件小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

介紹

在本教程中，我們將檢查Ajax文件上傳如何與Servlet一起使用。同樣，我們將用Bootstrap裝飾表單并通過jQuery Ajax上傳ajaxify文件。

實作

基本的servlet實現(xiàn)是相同的。因此，我們需要做的第一件事是更新我們的web.xml文件并為我們的應(yīng)用程序指定servlet。

web.xml

<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0"><display-name>DemoFileUploadServlet</display-name><welcome-file-list><welcome-file>home.jsp</welcome-file></welcome-file-list><servlet><description></description><display-name>DemoFileUploadServlet</display-name><servlet-name>demo</servlet-name><servlet-class>com.jcombat.sample.DemoFileUploadServlet</servlet-class></servlet><servlet-mapping><servlet-name>demo</servlet-name><url-pattern>/demo</url-pattern></servlet-mapping> </web-app>

請注意，指定的歡迎頁面為home.jsp 。因此，當(dāng)我們運(yùn)行servlet應(yīng)用程序時，該應(yīng)用程序應(yīng)該找到歡迎頁面jsp和servlet類，即DemoFileUploadServlet 。

home.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>File Upload Example in JSP and Servlet - Java web application</title> <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script>$(document).ready(function() {function bs_input_file() {$(".input-file").before(function() {if ( ! $(this).prev().hasClass('input-ghost') ) {var element = $("<input type='file' class='input-ghost' style='visibility:hidden; height:0'>");element.attr("name",$(this).attr("name"));element.change(function(){element.next(element).find('input').val((element.val()).split('\\').pop());});$(this).find("button.btn-choose").click(function(){element.click();});$(this).find("button.btn-reset").click(function(){element.val(null);$(this).parents(".input-file").find('input').val('');});$(this).find('input').css("cursor","pointer");$(this).find('input').mousedown(function() {$(this).parents('.input-file').prev().click();return false;});return element;}});}bs_input_file();$("#uploadBtn").on("click", function() {var url = "demo";var form = $("#sampleUploadFrm")[0];var data = new FormData(form);/* var data = {};data['key1'] = 'value1';data['key2'] = 'value2'; */$.ajax({type : "POST",encType : "multipart/form-data",url : url,cache : false,processData : false,contentType : false,data : data,success : function(msg) {var response = JSON.parse(msg);var status = response.status;if (status == 1) {alert("File has been uploaded successfully");} else {alert("Couldn't upload file");}},error : function(msg) {alert("Couldn't upload file");}});});}); </script> </head><body><div class="container"><div class="col-md-8 col-md-offset-2"><h3>File Upload Example Using Servlet, Bootstrap and Ajax - jCombat</h3><form id="sampleUploadFrm" method="POST" action="#" enctype="multipart/form-data"><div class="form-group"><div class="input-group input-file" name="file"><span class="input-group-btn"><button class="btn btn-default btn-choose" type="button">Choose</button></span> <input type="text" class="form-control"placeholder='Choose a file...' /> <span class="input-group-btn"><button class="btn btn-warning btn-reset" type="button">Reset</button></span></div></div><div class="form-group"><button type="button" class="btn btn-primary pull-right" id="uploadBtn">Submit</button><button type="reset" class="btn btn-danger">Reset</button></div></form></div></div> </body> </html>

在home.jsp中，我們具有用于文件上傳HTML表單，該表單使用Bootstrap。我們還在頂部添加了<script>標(biāo)記，該標(biāo)記具有jquery代碼以使表單提交操作無效。

接下來讓我們創(chuàng)建servlet類–

DemoFileUploadServlet.java

package com.jcombat.sample;import java.io.File; import java.io.IOException; import java.io.PrintWriter; 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.disk.DiskFileItemFactory; import org.apache.commons.fileupload.servlet.ServletFileUpload;public class DemoFileUploadServlet extends HttpServlet {private static final long serialVersionUID = 1L;/*** @see HttpServlet#HttpServlet()*/public DemoFileUploadServlet() {super();}/*** @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)*/protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doPost(request, response);}/*** @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)*/protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {final String UPLOAD_DIRECTORY = "C:/uploads";if(ServletFileUpload.isMultipartContent(request)){try {List multiparts = new ServletFileUpload(new DiskFileItemFactory()).parseRequest(request);for(FileItem item : multiparts){if(!item.isFormField()){File fileSaveDir = new File(UPLOAD_DIRECTORY);if (!fileSaveDir.exists()) {fileSaveDir.mkdir();}String name = new File(item.getName()).getName();item.write( new File(UPLOAD_DIRECTORY + File.separator + name));}}} catch (Exception e) {// exception handling}PrintWriter out = response.getWriter();out.print("{\"status\":1}");}}}

確保pom.xml文件添加了以下依賴項。

pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><groupId>com.jcombat.sample</groupId><artifactId>ServletFileUploadDemo</artifactId><version>0.0.1-SNAPSHOT</version><packaging>war</packaging><name>Servlet with Maven Demo</name><dependencies><dependency><groupId>javax.servlet</groupId><artifactId>javax.servlet-api</artifactId><version>3.0.1</version><scope>provided</scope></dependency><dependency><groupId>commons-fileupload</groupId><artifactId>commons-fileupload</artifactId><version>1.3</version></dependency></dependencies><build><sourceDirectory>src</sourceDirectory><plugins><plugin><artifactId>maven-war-plugin</artifactId><version>2.4</version><configuration><warSourceDirectory>WebContent</warSourceDirectory><failOnMissingWebXml>false</failOnMissingWebXml></configuration></plugin><plugin><artifactId>maven-compiler-plugin</artifactId><configuration><source>1.7</source><target>1.7</target></configuration></plugin></plugins></build> </project>

執(zhí)行應(yīng)用程序

當(dāng)執(zhí)行應(yīng)用程序時，我們將看到以下HTML表單。

選擇文件，然后單擊Submit 。成功上傳文件后，我們會收到一條警告，提示“文件已成功上傳”。

下載源代碼

翻譯自: https://www.javacodegeeks.com/2018/09/ajax-file-upload-servlet-bootstrap.html

總結(jié)

以上是生活随笔為你收集整理的使用Servlet和Bootstrap上传Ajax文件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：神舟qtj5笔记本电脑参数？
下一篇：使用这些先进的GC技术提高应用程序性能