首頁 > 軟體

Ajax上傳檔案並顯示進度條

2019-12-12 10:27:51

      Ajax 即「Asynchronous Javascript And XML」（非同步 JavaScript 和 XML），是指一種建立互動式網頁應用的網頁開發技術。

      Ajax = 非同步 JavaScript 和 XML 或者是 HTML（標準通用標示語言的子集）。

      Ajax 是一種用於建立快速動態網頁的技術。

      Ajax 是一種在無需重新載入整個網頁的情況下，能夠更新部分網頁的技術。

      通過在後台與伺服器進行少量資料交換，Ajax 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。

      傳統的網頁（不使用 Ajax）如果需要更新內容，必須過載整個網頁頁面。

1

第一種：建立一個springboot的專案。

1、 開啟建立頁面 選擇File-new-project..

2、選擇建立的專案為spring initializr 進入springboot專案建立步驟（也可以選擇型別java，建立一個普通java專案）

3、輸入專案名字，選擇依賴web（根據專案需求選擇，此次需要），選擇存放目錄-完成（Finish）

4、在pom.xml中引入html以依賴

<dependency>

   <groupId>org.springframework.boot</groupId>

   <artifactId>spring-boot-starter-thymeleaf</artifactId>

</dependency>




2

第二種：建立一個簡單的javaweb專案。1、建立一個基本的javaweb專案2、整合springmvc開發環境

1

第一步：實現思路。1、借助於springboot的框架（springboot整合springmvc），實現上傳的後天功能。將檔案上傳到D:img下2、前端借助於原生js實現對上傳請求的監控獲得上傳進度，請求完成的情況下

2

第二步：編寫controller

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RequestMethod;

import org.springframework.web.bind.annotation.RequestParam;

import org.springframework.web.bind.annotation.ResponseBody;

import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;

import java.io.File;

import java.io.FileOutputStream;

//存取地址：http://localhost:8080/toAsyn

@Controller

public class UploadController {

// 跳轉到上傳檔案的頁面

@RequestMapping(value = "/toAsyn", method = RequestMethod.GET)

public String toAsyn() {

// 跳轉到 templates 目錄下的 uploadimg.html

return "asyn";

}

// 處理檔案上傳

@ResponseBody

@RequestMapping(value = "/testuploadimg", method = RequestMethod.POST)

public String uploadImg(@RequestParam("file") MultipartFile file,

HttpServletRequest request) {

String contentType = file.getContentType();

String fileName = file.getOriginalFilename();

String filePath = "d:/img/";

if (file.isEmpty()) {

return "檔案為空！";

}

try {

uploadFile(file.getBytes(), filePath, fileName);

} catch (Exception e) {

// TODO: handle exception

}

// 返回json

return "succes";

}

private void uploadFile(byte[] file, String filePath, String fileName)

throws Exception {

File targetFile = new File(filePath);

if (!targetFile.exists()) {

targetFile.mkdirs();

}

FileOutputStream out = new FileOutputStream(filePath + fileName);

out.write(file);

out.flush();

out.close();

}

}



3

第三步:設定檔案最大上傳限制。

1、新建application.yml

放到前專案下的：srcmainresourcesapplication.yml

2、新增內容：

spring:  

servlet:    

multipart:      

max-file-size: 120MB      

max-request-size: 120MB

3：否則上傳檔案超過10485760 位元組就會報錯

the request was rejected because its size (64050422) exceeds the configured maximum (10485760)


4

第四步：編寫前端程式碼。

1、路徑在 當前專案的：srcmainresourcesasyn.html

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>上傳進度條</title>

</head>

<body>

<div align="center">

<input type="file" id="pic" name="pic"/>

<input type="button" value="上傳圖片" onclick="uploadFile()" /><br />

</div>

<div id="progressBar" style="padding:0px;border:solid black 0px;visibility:hidden">

<table width="300" border="0" cellspacing="0" cellpadding="0"

  align="center">

<tr>

<td align="center" id="progressPersent">0%</td>

</tr>

<tr>

<td>

<!-- 黑色邊框部分 -->

<table width="100%" border="1" cellspacing="0" cellpadding="0"

  bordercolor="#000000">

<tr>

<td>

<!-- 紅色部分 -->

<table width="1%" border="0" cellspacing="0" cellpadding="0"

  bgcolor="#FF0000" id="progress">

<tr>

<td>&nbsp;</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<td align="center" id="complete">completed</td>

</tr>

</table>

</div>

<script>

    var xhr = new XMLHttpRequest();

    //上傳失敗

    function uploadFailed(evt) {

        document.getElementById("progressBar").style.visibility="hidden";

        document.getElementById("complete").innerText ="上傳異常！" ;

    }

    /**

     * 偵查附件上傳情況 ,這個方法大概0.05-0.1秒執行一次

     */

    function onprogress(evt){

        document.getElementById("progressBar").style.visibility="visible";

        var loaded = evt.loaded;       //已經上傳大小情況

        var tot = evt.total;       //附件總大小

        var per = Math.floor(100*loaded/tot);   //已經上傳的百分比

        //document.getElementById("son").innerHTML =per +"%" ;

        document.getElementById("progressPersent").innerText =per +"%" ;

        document.getElementById("progress").style.width =per +"%" ;

    }

    //上傳檔案

    function uploadFile() {

        //將上傳的多個檔案放入formData中

        var picFileList = document.getElementById("pic").files;

        var formData = new FormData();

        formData.append("file" , picFileList[0] );

        //監聽事件

        xhr.upload.addEventListener("progress", onprogress, false);

        xhr.addEventListener("error", uploadFailed, false);//傳送檔案和表單自定義引數

        xhr.open("POST", "testuploadimg",true);

        //記得加入上傳資料formData

        xhr.send(formData);

        xhr.onreadystatechange = function() {

            if (xhr.readyState == 4 && xhr.status == 200) {

                if(xhr.responseText == "succes"){

                    document.getElementById("progress").style.width ="100%" ;

                    document.getElementById("progressPersent").innerText ="100%" ;

                    document.getElementById("complete").innerText ="上傳成功！" ;

}else{

                    document.getElementById("complete").innerText ="上傳失敗！" ;

}

            }

}

    }

</script>

</body>

</html>




1

第一步：測試。

1、為了測試上傳進度效果此次測試檔案大小為61MB

2、啟動服務進入：http://localhost:8080/toAsyn

3、選擇檔案上傳，測試成功，如下所示：




2

第二步：總結。1、非IE一般使用XMLHttpRequest，IE使用ActiveXObjectvar xmlHttp = null;//如果支援XMLHttpRequest則使用if (XMLHttpRequest) {xmlHttp = new XMLHttpRequest();} else {//如果是IE瀏覽器則需要使用xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');}2、IE並不支援FormData物件var formData = new FormData();3、如果需要相容ie需要解決以上兩個問題

相關文章

IT145.com E-mail:sddin#qq.com