网站如何做图片自动切换,西安网站建设哪家强,莱芜推广,网站建设售后服务费包括哪些介绍 在本教程中#xff0c;我们将检查Ajax文件上传如何与Servlet一起使用。 同样#xff0c;我们将用Bootstrap装饰表单并通过jQuery Ajax上传ajaxify文件。 实作 基本的servlet实现是相同的。 因此#xff0c;我们需要做的第一件事是更新我们的web.xml文件并为我们的应用… 介绍 在本教程中我们将检查Ajax文件上传如何与Servlet一起使用。 同样我们将用Bootstrap装饰表单并通过jQuery Ajax上传ajaxify文件。 实作 基本的servlet实现是相同的。 因此我们需要做的第一件事是更新我们的web.xml文件并为我们的应用程序指定servlet。 web.xml ?xml version1.0 encodingUTF-8?
web-app xmlns:xsihttp://www.w3.org/2001/XMLSchema-instance xmlnshttp://java.sun.com/xml/ns/javaee xsi:schemaLocationhttp://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd idWebApp_ID version3.0display-nameDemoFileUploadServlet/display-namewelcome-file-listwelcome-filehome.jsp/welcome-file/welcome-file-listservletdescription/descriptiondisplay-nameDemoFileUploadServlet/display-nameservlet-namedemo/servlet-nameservlet-classcom.jcombat.sample.DemoFileUploadServlet/servlet-class/servletservlet-mappingservlet-namedemo/servlet-nameurl-pattern/demo/url-pattern/servlet-mapping
/web-app 请注意指定的欢迎页面为home.jsp 。 因此当我们运行servlet应用程序时该应用程序应该找到欢迎页面jsp和servlet类即DemoFileUploadServlet 。 home.jsp %page contentTypetext/html pageEncodingUTF-8%
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//ENhttp://www.w3.org/TR/html4/loose.dtd
html
head
meta http-equivContent-Type contenttext/html; charsetUTF-8
titleFile Upload Example in JSP and Servlet - Java web application/title
link relstylesheethrefhttps://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
scriptsrchttps://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js/script
scriptsrchttps://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 typefile classinput-ghost stylevisibility: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(Couldnt upload file);}},error : function(msg) {alert(Couldnt upload file);}});});});
/script
/headbodydiv classcontainerdiv classcol-md-8 col-md-offset-2h3File Upload Example Using Servlet, Bootstrap and Ajax - jCombat/h3form idsampleUploadFrm methodPOST action# enctypemultipart/form-data!-- COMPONENT START --div classform-groupdiv classinput-group input-file namefilespan classinput-group-btnbutton classbtn btn-default btn-choose typebuttonChoose/button/span input typetext classform-controlplaceholderChoose a file... / span classinput-group-btnbutton classbtn btn-warning btn-reset typebuttonReset/button/span/div/div!-- COMPONENT END --div classform-groupbutton typebutton classbtn btn-primary pull-right iduploadBtnSubmit/buttonbutton typereset classbtn btn-dangerReset/button/div/form/div/div
/body
/html 在home.jsp中我们具有用于文件上传HTML表单该表单使用Bootstrap。 我们还在顶部添加了script标记该标记具有jquery代码以使表单提交操作无效。 接下来让我们创建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 xmlnshttp://maven.apache.org/POM/4.0.0 xmlns:xsihttp://www.w3.org/2001/XMLSchema-instancexsi:schemaLocationhttp://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsdmodelVersion4.0.0/modelVersiongroupIdcom.jcombat.sample/groupIdartifactIdServletFileUploadDemo/artifactIdversion0.0.1-SNAPSHOT/versionpackagingwar/packagingnameServlet with Maven Demo/namedependenciesdependencygroupIdjavax.servlet/groupIdartifactIdjavax.servlet-api/artifactIdversion3.0.1/versionscopeprovided/scope/dependencydependencygroupIdcommons-fileupload/groupIdartifactIdcommons-fileupload/artifactIdversion1.3/version/dependency/dependenciesbuildsourceDirectorysrc/sourceDirectorypluginspluginartifactIdmaven-war-plugin/artifactIdversion2.4/versionconfigurationwarSourceDirectoryWebContent/warSourceDirectoryfailOnMissingWebXmlfalse/failOnMissingWebXml/configuration/pluginpluginartifactIdmaven-compiler-plugin/artifactIdconfigurationsource1.7/sourcetarget1.7/target/configuration/plugin/plugins/build
/project执行应用程序 当执行应用程序时我们将看到以下HTML表单。 选择文件然后单击Submit 。 成功上传文件后我们会收到一条警告提示“文件已成功上传”。 下载源代码 下载源代码 翻译自: https://www.javacodegeeks.com/2018/09/ajax-file-upload-servlet-bootstrap.html
