h5裡js和servlet實作檔案上傳的實作步驟
html5
javascript
servlet
這次教大家的是在H5裡如何用JS和servlet來實現檔案上傳,不過有一個前提條件,必須要是h5和jsp3.0版本,因為用到了新屬性,取得file物件和後台得到part物件。
下面給大家看一個案例列
前台jsp
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Insert title here</title> <script type="text/javascript" src="jquery-3.2.1.min.js"></script> </head> <body> <p> name:<input type="text" id="name"/> 文件:<input type="file" id="file"/> <br> <button id="btu" onclick="btu()">提交</button> </p> </body> <script> function btu(){ var name=$("#name").val(); var file=$("#file")[0].files[0];//新特性,获取文件对象 var fordata=new FormData();//新特性,得到formData对象,把获取的值扔进去,相当于map fordata.append("name",name); fordata.append("file",file); console.log(file) $.ajax({ url:"/war-2/UpdataFile", data:fordata, cache:false, processData:false, //必须写 contentType:false, //必须写 type:"post", success:function(data){ } }) } </script> </html>
登入後複製
後台java
package up; import java.io.File; import java.io.IOException; import java.util.Collection; import javax.servlet.ServletException; import javax.servlet.annotation.MultipartConfig; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.Part; /** * Servlet implementation class UpdataFile */ @MultipartConfig(location="E:/") @WebServlet("/UpdataFile") public class UpdataFile extends HttpServlet { private static final long serialVersionUID = 1L; private File file; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub System.out.println("1111111111"); } /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub //得到part对象,这个对象有write的方法,直接写到指定位置。但是千万别忘了写@MultipartConfig(location="E:/")注解,不指定位置默认是写到注解指定的位置。 Part part = request.getPart("file"); //普通的字段可以采用常规的getparamter的方法得到。 System.out.println(new String(request.getParameter("name").getBytes("iso-8859-1"),"utf-8")); System.out.println(part.getName()); System.out.println(part.getHeader("Content-Disposition")); System.out.println(part.getSize()); String fileName = getFileNameFromPart(part); part.write(fileName); } //截取文件名 public String getFileNameFromPart(Part part) { String header = part.getHeader("Content-Disposition"); String fileName = header.substring(header.indexOf("filename=\"")+10, header.lastIndexOf("\"")); return fileName; } }
登入後複製
以上是h5裡js和servlet實作檔案上傳的實作步驟的詳細內容。更多資訊請關注PHP中文網其他相關文章!
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章
Windows 11 KB5054979中的新功能以及如何解決更新問題
3 週前
By DDD
如何修復KB5055523無法在Windows 11中安裝?
2 週前
By DDD
Inzoi:如何申請學校和大學
4 週前
By DDD
如何修復KB5055518無法在Windows 10中安裝?
2 週前
By DDD
在哪裡可以找到Atomfall中的站點辦公室鑰匙
4 週前
By DDD

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)