2. 程式人生 > >Ajax使用FormData物件上傳檔案的兩種方式

Ajax使用FormData物件上傳檔案的兩種方式

阿新 • • 發佈：2019-01-15
  1. 以下是Demo的專案結構:主要就是一個servlet3.0和一個jsp頁面
    這裡寫圖片描述
  2. 由於使用的是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+"%&nbsp;&nbsp;"+Math.round(result/(1024*1024)*100)/100+"M/S&nbsp;&nbsp;剩餘"+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