H5技術在現代web開發中已經得到廣泛應用，其中包括能夠同時傳輸文件和JSON數據的功能。這個功能常常被使用在需要把一些基礎數據與文件上傳到服務器的場景。下面我們來看一下如何使用H5通過ajax同時傳輸文件和JSON數據。

// 創建一個FormData對象
var formData = new FormData();
// 添加文件到formData對象中
formData.append("file", $("#fileUploader")[0].files[0]);
// 添加JSON數據到formData對象中
formData.append("jsonData", JSON.stringify(jsonData));
// 發送ajax請求
$.ajax({
url: "/upload",
type: "POST",
data: formData,
dataType: "json",
contentType: false,
processData: false,
success: function(response) {
// 處理響應
}
});

代碼中使用了FormData對象來傳輸文件和JSON數據。FormData對象是H5新增的對象，可以方便地構建表單數據，包括文件上傳。具體來說，我們使用FormData的append方法來添加文件和JSON數據到formData對象中。其中，第一個參數為字段名，第二個參數為對應的值。注意，如果有多個文件需要上傳，可以使用formData.append("file", file)多次添加文件。

對于ajax請求的配置，我們設置contentType為false（默認值為application/x-www-form-urlencoded），以便讓瀏覽器根據表單數據的特性選擇正確的Content-Type值。同時，processData也應該設置為false，否則jQuery會將formData對象轉換成字符串并對其編碼。

在服務器端，我們需要進行相應的處理來讀取上傳的文件和JSON數據，用各自的方式進行處理。代碼如下：

const express = require("express");
const app = express();
const multer = require("multer");
const upload = multer();
app.post("/upload", upload.any(), function(req, res) {
// 讀取上傳的文件
const file = req.files[0];
// 讀取上傳的JSON數據
const jsonData = JSON.parse(req.body.jsonData);
// 處理上傳的文件和JSON數據
// ...
});

使用Multer來處理文件上傳請求，用upload.any()來處理multipart/form-data類型的請求。上傳的文件存放在req.files數組中，上傳的JSON數據則存放在req.body.jsonData中。

H5通過ajax上傳文件和JSON數據，可以方便地傳輸文件和數據，節省時間并提高效率。同時，使用Multer等工具來處理服務器端的上傳請求，更能方便地進行操作。