Ajax使用formData提交帶圖片上傳的表單

阿新 • • 發佈：2018-12-13

記錄一下今天踩過的坑。。這麼個問題居然搞了快兩個小時了。ssm框架，前臺form帶圖片上傳，因為效驗表單資料，所以不能直接submit。

formDat還是很簡單的，有很多加值得方法，後臺可以直接用物件接收。

使用ajax提交有很多種方式，說一下使用formDat，直接貼程式碼。

前端一個form表單，帶圖片

其實很簡單，只需注意幾個點。

1、用formData格式傳輸引數Controller的引數名也要和form表單name對應

2、因為我之前是用var file = $('#file').val();得到的file，後臺用MultipartFile file一直接收不到（就是這地方搞了好久）

後來慢慢調錯，發現Controller裡用String file 就能收的到，就覺得肯定是前臺傳過來的不對，然後前臺alert(file)發現是圖片路徑，不是Object物件，是一個字串

實在沒想到。。。改成這樣就好了。

直接new formData(“form...”) 好像也是傳的string型別圖片。

省略了很多.....這編輯器不好寫程式碼，複製過來又會亂。。等改善吧

反正遇到問題一步一步來，腦子蒙圈實在不知道哪有問題，看程式碼好像哪也沒有問題...這時候就要不斷調式縮小範圍，然後排除一些不可能有問題的地方，針對一些可能會有問題或者不確定有沒有問題的地方不斷測試，利用debug 和控制檯輸出。總是能解決的。

<form id="form1" enctype="multipart/form-data">

<label class="aui-label-control"> 暱稱 </label>

<input type="text" name="userName" id="1" >

<label class="aui-label-control"> 手機號碼 </label>

<input type="text" name="phone" id="2" "/>

<label class="aui-label-control"> 所在城市 </label>

<input type="text" name="city" id="3" />

<label class="aui-label-control"> 更換頭像 </label>

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

<a onclick="severCheck()" >確認修改</a>

</form>

js程式碼：ajax提交

function severCheck() {

var formData = new FormData();

var userName = $("#1").val();

var file = $("#file")[0].files[0];

var phone = $("#2").val();

var userId = $("#userId").val();

var city = $("#3").val();

var reg = /^1[34578]\d{9}$/;

var bool = false;

if (userName.length < 1 || userName.length > 12) {

...

} else {

...

}

if (phone != "" && !(reg.test(phone))) {

...

return false;

}

if ( city != "" && city.length > 10) {

...

return false;

}

if (bool) {

return false;

}

if (file != "") {

formData.append("file", file);

}

formData.append("city", city);

formData.append("userName", userName);

formData.append("userId", userId);

formData.append("phone", phone);

$.ajax({

type : "POST",

url : "<%=path%>/editUserInfo",

data : formData,

cache : false,

processData : false,

contentType : false,

success : function(data) {

window.location.reload();

if ("success" == data.msg) {

...

window.location.href = "<%=path%>/index";

} else if ("error" == data.msg) {

....

}

},

error:function(data){

window.location.reload();

if ("success" == data.msg) {

...

window.location.href = "<%=path%>/index";

} else if ("error" == data.msg) {

....

}

});

}

後端程式碼：springmvc接收後端程式碼

@RequestMapping("/editUserInfo")

@ResponseBody

public JSONObject EditUserInfo(HttpSession session, HttpServletRequest request,

@RequestParam(value = "file", required = false) MultipartFile file,

UserInfo userInfo) {

JSONObject json = new JSONObject();

// 圖片上傳

// 如果檔案不為空，寫入上傳路徑

if (Tools.isNotEmpty(file)) {

// 迴圈獲取file陣列中得檔案

// 上傳檔案

String fileName = Tools.saveFile(file, request);

//圖片路徑儲存到資料庫

userInfo.setHeadUrl(fileName);

}

userInfo.setUpdatetime(new Date());

int result = userInfoService.editUserInfo(userInfo);

if (result == 1) {

// session.removeAttribute("pagenum");

json.put("msg", "success");

} else {

json.put("msg", "error");

}

return json;

}

1	`var file = $("#file")[0].files[0];`

其實很簡單，只需注意幾個點。

1、用formData格式傳輸引數Controller的引數名也要和form表單name對應

2、因為我之前是用var file = $('#file').val();得到的file，後臺用MultipartFile file一直接收不到（就是這地方搞了好久）

後來慢慢調錯，發現Controller裡用String file 就能收的到，就覺得肯定是前臺傳過來的不對，然後前臺alert(file)發現是圖片路徑，不是Object物件，是一個字串

實在沒想到。。。改成這樣就好了。

直接new formData(“form...”) 好像也是傳的string型別圖片。

省略了很多.....這編輯器不好寫程式碼，複製過來又會亂。。等改善吧

反正遇到問題一步一步來，腦子蒙圈實在不知道哪有問題，看程式碼好像哪也沒有問題...這時候就要不斷調式縮小範圍，然後排除一些不可能有問題的地方，針對一些可能會有問題或者不確定有沒有問題的地方不斷測試，利用debug 和控制檯輸出。總是能解決的。

Ajax使用formData提交帶圖片上傳的表單

記錄一下今天踩過的坑。。這麼個問題居然搞了快兩個小時了。ssm框架，前臺form帶圖片上傳，因為效驗表單資料，所以不能直接submit。 formDat還是很簡單的，有很多加值得方法，後臺可以直接用物件接收。使用ajax提交有很多種方式，說一下使用formDat，直接貼程式碼。前

layui 圖片上傳+表單提交+ Spring MVC

throw https tput dex prev ava efi tst clas Layui 的上傳是最常用的, 不可或缺, 記錄一下代碼, 以後復制都能用!! 1.前端HTML: <div class="layui-form-item">

用Ajax提交多檔案上傳表單

function test（）{ var form = new FormData（document.getElementById（“表單id”））; $ .ajax（{ url：“表單提交路徑”， &nb

帶圖片上傳的,多行表單記錄提交

效果圖前臺頁面程式碼: <form target="form" id="myform" action="<%=basePath%>wxorder/submit" method="post" enctype="multipart/form-dat

SpringMVC上傳下載，頁面不重新整理提交帶附件的form表單

周所周知，如果要提交的form表單內帶有附件，那麼需要設定屬性enctype="multipart/form-data" 當我們要實現頁面不重新整理提交form表單的時候需要用到ajax，但是ajax提交form表單的時候需要將表單值進行序列化操作（$(formId).fo

簡單解決 multipart/form-data 檔案上傳表單中傳遞引數無法獲取的辦法! (解決辦法:動態更改表單提交URL)

在jsp（其它動態web頁面好像也存在）中，如果要上傳檔案，表單的enctype就必須設定為"multipart/form-data"了，這樣就能夠傳遞檔案資料，卻無法傳遞引數，如下的表單： [xhtml] view plaincopyprint? 01.<for

用jquery.form ajax提交檔案上傳表單

今天是準備把我們學校的畢業論文系統的上傳論文做完的，但過程遇到了問題，問題如下： 1.用原生的 <form action="/url" method="post"> <input type="file" name="file"></form

創建文件上傳表單

tput filename servlet type get 上傳文件二進制文件 long -a JSP可以通過HTML的form表單上傳文件到服務器。文件類型可以是文本文件、二進制文件、圖像文件等其他任何文檔。創建文件上傳表單接下來我們使用HTML標簽來創建文件

input[file]為空，ios手機，ajax上傳表單失敗，404，408 錯誤碼

專案中，目前都儘量採用 ajax 上傳表單，然後根據返回值進行提示，感覺使用者體驗好點。最近出現一個問題：蘋果部分型號的手機，在微信中，完善個人資訊頁面，ajax上傳表單時，未選擇頭像，出現失敗問題。檢視 nginx 返回 408、400 的錯誤，ajax 進入 error 回撥。碰

ajax上傳表單的倆種方式

1.用h5物件上傳表單（圖片） var formData = new FormData(); formData.append("authenticity_token", '1212121212'); formData.append("file[context]", "zxcvx

卜若的程式碼筆記系列-Web系列-SpringBoot-第九章：使用c#上傳表單-3209

1.首先，c#向web服務上傳資料其實是通過一個 HttpWebRequest物件，這個物件不是通過new出來的，是通過建立url連線產生的物件，我們可以這樣 HttpWebRequest request = WebRequest.Create(url) as HttpW

jquery運用FormData結合Ajax非同步上傳表單，超實用

首先建立一個formData,其中引數，就是你的form表單，jquery要加0,也可以用document.querySelector("form")得到 var formData = new FormData($("form")[0]); 接著就是非同步上傳了，其中一定要設定兩個值為falese,就是下

輕量級web富文字編輯器（可帶圖片上傳）

業務需求：通過後臺編輯文章和圖片，上傳到前端介面，展示新聞訊息模組。這個時候，需要一款簡潔的編輯器，百度編輯器是最常用的一種，但是功能太過於複雜，而wangEditor - 輕量級web富文字編輯器，配置方便，使用簡單。支援 IE10+ 瀏覽器，值得擁有。 wa

AJAX實現圖片上傳和預覽（傳統ajax與jQuery AJAX；帶圖片的表單提交）

一、通過Servlet3.0和傳統的AJAX實現圖片上傳和預覽此方法也適用於帶圖片的表單提交上傳時預覽圖片

HttpClient4模擬帶檔案上傳的表單提交

這裡用apache的HttpClient4.3模擬檔案上傳，上傳到一個java servlet，然後用servlet解析，把上傳檔案放到伺服器目錄下下面這個java應用，往一個java servlet中提交了一個檔案，和幾個普通表單屬性 package com.tes

Vue-resource如何實現表單提交以及file圖片上傳的壓縮

總括：個人在專案開發中所遇到的問題總結，主要介紹兩個知識點： ①vue-resource如何實現表單提交。 ②file圖片上傳如何壓縮，減少上傳壓力 vue中的程式碼 let that = this // 上傳圖片獲取url console.lo

java模擬表單上傳檔案，java通過模擬post方式提交表單實現圖片上傳功能例項

package com.zdz.httpclient;import java.io.BufferedReader;import java.io.DataInputStream;import java.io.DataOutputStream;import java.io.File;import java.io.

java模擬post方式提交表單實現圖片上傳

模擬表單html如下: <form action="up_result.jsp" method="post" enctype="multipart/form-data" name="form1" id="form1"> <label>

webuploader 圖片上傳外掛配合著表單提交 ajax方式

首先去官網下載或者github上面下載在 examples/image-upload 裡面的檔案 index.html 新增你要上傳的表單資訊是把表單的資料作為圖片上傳的引數傳進去的在 examples/image-upload 裡面的檔案upload.js

springmvc帶檔案上傳的form表單提交，用 jquery的ajaxfileupload或使用dropzone上傳圖文詳解

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <%@ page session="false"%> <%@page pageEncoding="utf-8" contentType="text/ht

Ajax使用formData提交帶圖片上傳的表單

相關推薦