Ajax使用FormData物件上傳檔案的兩種方式
- 以下是Demo的專案結構:主要就是一個servlet3.0和一個jsp頁面
- 由於使用的是servlet3.0,所以無需配置web.xml,以下是idnex.jsp頁面:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>檔案上傳demo</title>
<style type="text/css">
h1 {
text-align : center;
text-shadow: 2px 2px 2px #999;
}
a {
text-decoration: none;
position: relative;
display: block;
width: 100px;
height: 30px;
line-height: 30px;
background: #EEE;
border: 1px solid #999;
text-align: center;
background: #EEE;
}
input {
position: absolute ;
border-radius: 10px;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 999;
opacity: 0;
}
#myDiv {
margin: auto;
width: 100px;
height: 30px;
}
a:HOVER {
background: red;
}
.fileList {
width: 600px;
height: 400px;
overflow: auto;
position: absolute;
bottom: 20px;
right: 20px;
position: absolute;
border: 1px solid blue;
position: absolute;
}
ul {
list-style: none;
}
ul:after {
clear: both;
content: "";
display: block;
}
ul:nth-child(odd) {
background: #677077;
color: #fff;
}
li {
float: left;
}
</style>
</head>
<body>
<h1>檔案上傳demo</h1>
<div id="myDiv">
<a href="javascript:;" id="fileUpload">檔案上傳
<input type="file" multiple onchange="fileChange(this)" />
</a>
</div>
<div class="fileList" id="fileList">
<ul>
<li style="width: 30%">檔名</li>
<li style="width: 68%">上傳情況</li>
</ul>
</div>
</body>
<script>
function fileChange(fileInput) {
var files = fileInput.files;
var tempHtml = "";
for (var i = 0; i < files.length; i++) {
var file = files[i];
tempHtml += "<ul>"
+ "<li style='width: 30%'>"
+ file.name
+ "</li>"
+ "<li style='width: 68%'><progress id='p"+i+"' max='100' value=''></progress><span id='sp"+i+"'></span></li></ul>";
fileUpload(file, i);
}
document.getElementById("fileList").innerHTML += tempHtml;
}
function fileUpload(file, index) {
var formData = new FormData();
formData.append(file.name, file);
var xhr = new XMLHttpRequest();
var oldUploaded=0;
var curUploaded=0;
var total=0;
var percent=0;
xhr.upload.addEventListener("progress",function(event){
var loaded=event.loaded;
if(oldUploaded==0){
total=event.total;
oldUploaded=event.loaded;
}
curUploaded=event.loaded;
percent=Math.round(event.loaded/event.total*100);
document.getElementById("p"+index).value=percent;
});
var upSpeed=setInterval(function(){
if(oldUploaded!=0){
//得到的是一個byte值
var result=curUploaded-oldUploaded;
var leave=total-curUploaded;
var label=document.getElementById("sp"+index);
label.innerHTML=percent+"% "+Math.round(result/(1024*1024)*100)/100+"M/S 剩餘"+Math.round(leave/result)+"秒";
if(total==oldUploaded&&result==0){
clearInterval(upSpeed);
}
oldUploaded=curUploaded;
}
},1000);
xhr.open("post", "FileUp", true);
xhr.send(formData);
}
</script>
</html>
3.FileUp.java類程式碼如下:
package com.prosay.upload;
import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Collection;
import java.util.List;
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;
import org.apache.tomcat.util.http.fileupload.FileItem;
import org.apache.tomcat.util.http.fileupload.disk.DiskFileItemFactory;
import org.apache.tomcat.util.http.fileupload.servlet.ServletFileUpload;
import org.apache.tomcat.util.http.fileupload.servlet.ServletRequestContext;
/**
* 檔案上傳
*/
@WebServlet("/FileUp") // servlet3.0的規範,使用註解無需配置web.xml
@MultipartConfig // 加上該註解標識這個servlet支援檔案上傳,否則request.getParts()返回空,後臺無法接收到檔案
public class FileUp extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* 後臺接收檔案方式一,該方式需要@MultipartConfig註解
*/
public void service(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException {
request.setCharacterEncoding("utf-8");
String savePath = request.getServletContext().getRealPath("/myFiles");
Collection<Part> files = request.getParts();
for (Part file : files) {
file.write(savePath + "/" + file.getName());
}
}
/**
* 後臺接收檔案方式二,該方式無需@MultipartConfig註解
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
String savePath = request.getServletContext().getRealPath("/myFiles");
DiskFileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
try {
List<FileItem> items = upload.parseRequest(new ServletRequestContext(request));
for (FileItem item : items) {
if (!item.isFormField()) {
// System.out.println("savePath = " + savePath);
// System.out.println(item.getName());
// System.out.println(item.getFieldName());
item.write(new File(savePath + "/" + item.getFieldName()));
}
}
} catch (Exception e) {
e.printStackTrace();
}
}
}
注:上傳檔案測試的時候,這兩種後臺處理檔案的方式任選其一即可,方式一簡潔些,但是需要@MultipartConfig註解,而方式二就不需要該註解。
4.佈署Demo到tomcat,啟動tomcat以後,如果沒報錯,開啟瀏覽器,訪問:http://localhost:8080/0813upload/,效果如下圖所示:
點選檔案上傳按鈕,選擇檔案後,開始上傳的效果圖如下:
上傳完成後,在本地磁碟的myFiles資料夾下可以看到上傳成功的檔案,如下圖所示:
本例中需要注意的幾個問題:
①取消a標籤onclick事件,因為實際上已經不需要a標籤的onclick觸發file的click了,而是直接就點選到file;
②file標籤不需要再設定display:none隱藏,而是通過opacity:0讓它完全透明,實際它是浮在a標籤之上
③file標籤設定position:absolute後要給left:0、top:0,否則file標籤不會吻合覆蓋a標籤導致點選按鈕的時候點不到file標籤
④index.jsp頁面html的宣告要用h5的方式:,因為後面使用的進度條progress和FormData物件是h5中的新內容,h4中是沒有的;<head></head>
標籤中還要加上<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
,否則頁面會出現中文亂碼
⑤在FileUp.java類中,如果使用方式一接受檔案,一定不要忘記在類上面加上@MultipartConfig註解,否則Collection<Part> files = request.getParts()
中的files集合就是空的;如果使用方式二來接受檔案,List<FileItem> items = upload.parseRequest(request)
這樣寫的話,items中就是空的,是取不到前臺傳過來的檔案的,必須這樣寫:List<FileItem> items = upload.parseRequest(new ServletRequestContext(request))
,request要通過ServletRequestContext類new出來放進去才可以,自己在網上查了好多資料都是前面那種錯誤的寫法,後來又查了好久才找到後面這種正確的寫法。在此特意總結一下,免得以後遇到走彎路了!
相關推薦
將HTML頁面自動儲存為PDF檔案並上傳的兩種方式(一)-前端(react)方式
一、業務場景 公司的樣本檢測報告以React頁面的形式生成,已調整為A4大小的樣式並已實現分頁,業務上需要將這個網頁生成PDF檔案,並上傳到伺服器,後續會將這個檔案傳送給客戶(這裡不考慮)。 二、原來的實現形式 瀏覽器原生方法:window.print()可以將網頁儲存為PDF檔案,由於檢測報告
Java檔案上傳的兩種方式(uploadify和Spring預設方式)
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ include file="../jsp/include/taglibs.jsp"%> <!DOCTY
java檔案上傳的兩種方式的一些問題
接觸到一個專案,一個java web專案,據說是十幾年的寫的程式碼,現在打算做新版本,先要我們專案組解決一下就版本程式碼裡面的bug,以便現在的日常使用。 主要的bug是檔案上傳失敗 打斷點跟蹤了一下,發現了問題:SpringMVC中servletFileUpload.p
利用Selenium實現圖片文件上傳的兩種方式介紹
最簡 pfile 狀態 blog nbsp ftw fin send find 在實現UI自動化測試過程中,有一類需求是實現圖片上傳,這種需求根據開發的實現方式,UI的實現方式也會不同。 一、直接利用Selenium實現 這種方式是最簡單的一種實現方式,但是依賴於
配置Spring項目上傳的兩種方式(全解析)
enc element xml配置 很多 files dir 前言 name 兩種 歡迎查看Java開發之上帝之眼系列教程,如果您正在為Java後端龐大的體系所困擾,如果您正在為各種繁出不窮的技術和各種框架所迷茫,那麽本系列文章將帶您窺探Java龐大的體系。本系列教程希望
配置Spring專案上傳的兩種方式(全解析)
歡迎檢視Java開發之上帝之眼系列教程,如果您正在為Java後端龐大的體系所困擾,如果您正在為各種繁出不窮的技術和各種框架所迷茫,那麼本系列文章將帶您窺探Java龐大的體系。本系列教程希望您能站在上帝的角度去觀察(瞭解)Java體系。使Java的各種後端技術在你心中模組化;讓你在工作中能將Java各個技術瞭
Ajax使用FormData物件上傳檔案的兩種方式
以下是Demo的專案結構:主要就是一個servlet3.0和一個jsp頁面 由於使用的是servlet3.0,所以無需配置web.xml,以下是idnex.jsp頁面: <%@ page language="java" contentType="
jersey 檔案上傳-使用兩種不同的方式
在該文件中,我將帶領大家使用基於JAX-RS REST風格的實現Jersey來上傳檔案到伺服器制定的資料夾,如果是圖片並讀取顯示出該圖片。 準備工作: 準備一個form表單,有兩個欄位,一個是type="file"和type="text",並且表單需要使用POST方式
檔案上傳的幾種方式
一、springmvc中的檔案上傳 1.配置檔案 (1).pom檔案,檔案上傳主要需要如下幾個jar包 <dependency> <groupId>org.springframework</groupId>
web 檔案上傳的幾種方式
問題 檔案上傳在WEB開發中應用很廣泛。 檔案上傳是指將本地圖片、視訊、音訊等檔案上傳到伺服器上,可以供其他使用者瀏覽或下載的過程。 以下總結了常見的檔案(圖片)上傳的方式和要點處理。 表單上傳 這是傳統的form表單上傳,使用form表單的input[type=”file”]控制元
HTML5 檔案上傳的2種方式
以前上傳檔案需要提交Form表單。 HTML5方式上傳檔案,可以通過使用FormData類模擬Form表單提交,從而實現無重新整理上傳檔案。 假設有一個檔案選擇框 <input type="file" name="pic" id="pic" accept="i
python檔案上傳的三種方式
def upload(request): return render(request, 'upload.html') def upload_file(request): username = request.POST.get('username') fafafa
表單檔案上傳的兩種方法
一.使用jquery外掛事件檔案上傳,使用方法如下: 1.引入jquery外掛中的相關檔案(可在jquery官網上查詢) jquery.ui.widget.js / / jquery.iframe-transport.js // jquery.fileu
python指令碼在linux上執行的兩種方式
1、直接使用python xxxx.py執行。其中python可以寫成python的絕對路徑。使用which python進行查詢。 2、在檔案的頭部(第一行)寫上#!/usr/bin/python2.7,這個地方使用python的絕對路徑,就是上面用which pyt
C++ 中#include標頭檔案兩種方式的區別
<>:先在系統目錄中尋找標頭檔案,然後再到當前目錄下找,一般用於標準的標頭檔案 stdio.h和 stdlib.h等等" ":先在當前目錄中尋找標頭檔案,然後再到系統目錄中找,一般用於in
oracle 刪除備份檔案兩種方式
執行後會在相同目錄下生成日誌檔案:DelExpiredLog.log現實執行的起始時間點。 @echo off rem write to log set filename=DelExpiredLog.log echo -------------------Delete Expired Log Files--
springBoot使用Controller讀取配置檔案兩種方式&讀取自定義配置方法
Controller 核心配置檔案 application.propertie web.msg=Hello! This is Controller demo; Controller:
Mysql 匯入匯出檔案兩種方式
下面我們要把上面的檔案匯入到資料庫中,匯入之前要確認資料庫已經在執行,即是mysqld程序(或者說服務,Windows NT下面稱為”服務“,unix下面為”程序“)已經在執行。然後執行下面的命令: bin/mysql –p < /home/mark/New_Data.sql 接著按提示輸入密碼,如果上
通過jQuery Ajax使用FormData物件上傳檔案
FormData物件,是可以使用一系列的鍵值對來模擬一個完整的表單,然後使用XMLHttpRequest傳送這個"表單"。在 Mozilla Developer 網站 使用FormData物件 有詳盡的FormData物件使用說明。但上傳檔案部分只有底層的XMLHttpRequest物件傳送上傳請求,那麼怎
java上傳檔案以流方式判斷型別
package com.omg.utils; /** * 檔案型別枚取 */ public enum FileType { /** * JEPG. */ JPEG("FFD8FF"), /** * PNG. */ PNG("89504E47