使用FormData上傳多個檔案

阿新 • • 發佈：2019-01-30

由於專案中使用到，特此寫個Demo
html程式碼：

<html>
<head>
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<form enctype="multipart/form-data" id="form_example">
    <input type="file" id="files" multiple 
/><br/><br/>
    <input type="submit" value="提交"/>
</form>

<div id='file-list-display'></div>
</body>
</html>

js程式碼：

<script type="text/javascript">
    $(document).ready(function () {
        var fileList = [];
        var fileCatcher = document.getElementById('form_example' 
);
        var files = document.getElementById("files"), renderFileList;
        var fileListDisplay = document.getElementById('file-list-display'), sendFile;

        fileCatcher.addEventListener("submit", function (event) {
            event.preventDefault();
            //上傳檔案
            sendFile();
        });

        files.addEventListener("change" 
, function (event) {
            for (var i = 0; i < files.files.length; i++) {
                fileList.push(files.files[i]);
            }
            renderFileList();
        });

        renderFileList = function () {
            fileListDisplay.innerHTML = '';
            fileList.forEach(function (file, index) {
                var fileDisplayEl = document.createElement("p");
                fileDisplayEl.innerHTML = (index + 1) + ":" + file.name;
                fileListDisplay.appendChild(fileDisplayEl);
            })
        };

        sendFile = function () {
            var formData = new FormData();
            var request = new XMLHttpRequest();
            //迴圈新增到formData中
            fileList.forEach(function (file) {
                formData.append('files', file, file.name);
            })
            request.open("POST", "/test/upload.do");
            request.send(formData);
        }
    })
</script>

後端使用Spring MVC接收前端檔案
配置multipart解析器：

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"
          p:defaultEncoding="utf-8"/>

Controller：

@RequestMapping("/upload.do")
@ResponseBody
public Object upload(@RequestParam MultipartFile[] files) {
      System.out.println(files.length);
      return "ok";
}

前端頁面：

請求：

使用FormData上傳多個檔案

由於專案中使用到，特此寫個Demo html程式碼： <html> <head> <title>Title</title> <s

微信小程式上傳(多個檔案上傳)

微信小程式上傳(多個檔案上傳) /** * 上傳照片//選擇圖片時限制9張，如需超過9張，同理亦可參照此方法上傳多張照片 */ uploadImg:function(){ var that = this; wx.chooseImage({ count

ajaxfileupload.js 上傳多個檔案

上傳單個檔案 JS $.ajaxFileUpload({ url :"", secureuri : false, fileElementId : 'img', --傳入file ID data:

input型別上傳多個檔案（selenium+Python）

一般上傳方法分為兩種：input型別和非input型別，這裡具體分析input型別。 html檔案：【上傳圖示】按鈕元素定位中包含name=“file” type="file" 果斷採用input+sendkeys模式。一、上傳一張圖片，上程式碼：解釋

vue上傳多個檔案，附件和其他資料一起傳給後臺

前端：實現多圖上傳主要用到以下兩個屬性： <el-form-item label="附件上傳" label-width="80px"> 　　 <el-f

el-upload控制元件一次介面請求上傳多個檔案

el-upload元件預設情況下上傳多少個檔案就會請求多少次上傳介面，如何一次上傳多個檔案而不必多次請求上傳介面呢？直接看程式碼 html <el-upload :action="actionUrl" :auto-upload="false" :multiple="true" :file-list=

php 在linux 同時上傳多個檔案時報錯 SplFileObject::__construct(/tmp/phpvfQPvQ):

分析：這個不是上傳檔案的最大值的問題，而是由於linux系統自動清除臨時檔案的願意造成的 thinkphp\library\think\File.php 的建構函式加個判斷 if(file_exists($filename)) 簡單解決報錯可以讓你用起來不知道有沒有其他其他不

flask 伺服器上面下載多個檔案，客戶端一次性上傳多個檔案

#encoding=utf8 import flask,os,sys,time from flask import request,send_from_directory import multiEmbeddings import tensorflow as tf &n

asp.net簡單例項——同時上傳多個檔案

之前在網站上看到的一些上傳檔案的功能，感覺還是蠻方便的，這次自己利用asp.net中的HttpFileCollection類做了一個簡單的例子。廢話不多說，下面看操作。首先，新增一個新的web窗體，在窗體上直接拖拽這幾個控制元件：一個Panel作為容器、

使用webuploader一次性上傳多個檔案

先下載webuploader的js包(http://fex.baidu.com/webuploader/download.html)然後是頁面中是jquery部分<script type="text/javascript">$(function(){/******

【微信小程式開發筆記】上傳多個檔案超過10個

【小程式筆記】wx.uploadFile(OBJECT) 先說說遇到的問題：小程式可通過wx.uploadFile(OBJECT)介面上傳手機檔案至伺服器，但是在文件中關於請求中有這麼一段說明： request、uploadFile、down

1次ajax請求(XMLHttpRequest)上傳多個檔案，支援進度條

封裝了一個ajax多檔案上傳，功能就是選擇多個檔案，用ajax上傳。呼叫方式也很簡單，寫一個json物件做為引數配置，設定要上傳的服務端url以及選擇檔案和上傳完成等的事件處理函式，new一個AjaxUploadX物件，呼叫selectFiles方法選擇檔案，呼叫upla

Struts檔案上傳與下載詳解 _上傳多個檔案

在上一篇中給大家列出的單個檔案的上傳，那麼這一篇咱們講講上傳多個檔案改怎麼作呢？由於過程和上傳單個檔案的類似，所以在這裡不細說，相信大家都能看懂，看不懂的可以在評論區留言，我看到之後會及時

input 框上傳多個檔案以及檔案校驗

1、如何上傳多個檔案在input標籤中加入 multiple 屬性，如下 <input type="file" name="file1" id="file1" multiple="multiple"/> 當然，這樣也是一樣的： <

單個檔案上傳+多個檔案上傳

單個檔案上傳 jsp頁面 <body> <form action="shangchuan.do" method="post" enctype="multipart/form-data"> 檔案<

input File實現同時上傳多個檔案

預設的呼叫方式： <input type="file" name="filename"/> 可實現上傳單個檔案，但無法多選確認。 html在input[type='file']中給我們提

asp.net 中一次上傳多個檔案

看到一篇老外的文章，說在asp.net 中，如何先讓使用者把要上傳的檔案都選好了，然後一次上傳，今小結如下首先在頁面加一個上傳檔案控制元件，一個“attach"按鈕，一個listbox，用來存放等待上傳的檔名，一個"UPLOAD"按鈕，一個”刪除按鈕 <form

關於在一個form表單裡同時上傳多個檔案和文字資訊的解決方案。。。

執行環境：tomcat5.0.30+springframework步驟：1。定義一個form表單index.jsp和error.jsp**************************************index.jsp************************

HttpClient傳送方實現上傳多個檔案

public static void upload(String url, List<String> filepaths,HashMap<String, String> mapParams) { HttpClient

使用ajaxfileupload同時上傳多個檔案

ajaxFileupload這個外掛用於上傳檔案，不過它預設是隻能上傳一個檔案。通過修改其原始碼，可以方便地實現多個檔案上傳。 ajaxFileupload的原理挺簡單的，它將使用者指定（通過ID）的file input新增到form裡面，然後將form提交。我們只需要

使用FormData上傳多個檔案

相關推薦