1. 程式人生 > >關於檔案上傳只能用表單提交而不能非同步提交的問題

關於檔案上傳只能用表單提交而不能非同步提交的問題

1.檔案(圖片/文件)上傳就spring自帶上傳工具而言,只能用表單提交submit方式進行,不能使用ajax非同步提交表單,因為非同步提交之後input標籤的內容就被springMVC解析成了字串,無法獲取檔名稱和地址。頁面如下:

<form name="fileForm" id="fileForm" action="/manage/img/upload" method="post"  enctype="multipart/form-data">
    <table>
        <tr>
            <td align="right">
<label style="font-size: 15px;">新增圖片:</label> </td> <td> <input type="file" name="file"> <button type="button" onclick="uploadFormSubmit();">上傳</button> </td> </
tr> </table> </form>
2.js程式碼如下:
function uploadFormSubmit(){    
var fo = document.getElementsByName("fileForm");
$(fo).submit();
} 3.當然可以用多種方式去提交表單,但是ajax非同步請求不行。後臺程式碼如下(input之所以
type="file" name="file"  因為後臺會有一個專門的file檔案類去接收上傳的檔案,框架封裝
@RequestMapping(value = "/manage/img/upload",method = RequestMethod.POST
) public Object imgUpload(@RequestParam("file") CommonsMultipartFile file){ logger.info("=====上傳圖片=====圖片:"+file); String path="D:/"+file.getOriginalFilename(); File newFile=new File(path); //通過CommonsMultipartFile的方法直接寫檔案(注意這個時候) try{ file.transferTo(newFile); }catch (Exception e){ } return path; }
4.如此就遇到一個尷尬的場面,當你儲存完檔案之後,想返回儲存路徑到當前頁面時,發現根本跳不過去,非同步請求又不行,如此求助各路大牛終於找到解決辦法:

1)引入js檔案 jQuery-form.js檔案(官網可以下載,或者加入下面的群群檔案有);

2)頁面js程式碼改造:

function uploadFormSubmit(){
    /*var fo = document.getElementsByName("fileForm");
    $(fo).submit();*/
$("#fileForm").ajaxSubmit({
        url: "/manage/img/upload",
        type: "post",
        success: function (data) {
            var img_url = data.body;
        }
    });
}
3)如此就獲取到後臺返回的檔案儲存路徑img_url

有什麼問題歡迎入群研討


相關推薦

關於檔案只能提交不能非同步提交的問題

1.檔案(圖片/文件)上傳就spring自帶上傳工具而言,只能用表單提交submit方式進行,不能使用ajax非同步提交表單,因為非同步提交之後input標籤的內容就被springMVC解析成了字串,

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

實現檔案,以及提交成功的回撥函式

主要將實現一下兩個功能: 1、使用commons-fileupload實現檔案的上傳(包括圖片);2、使用jquery-form.js實現表單提交成功的回撥函式。 <%@ page language="java" contentType="text/html;

smartupload實現檔案時獲取資料

實現檔案上傳的form表單必須滿足兩個條件:method="post" enctype="multipart/form-data" 表單中enctype="multipart/form-data"的意思是設定表單的MIME編碼。預設情況,這個編碼格式是a

springMVC檔案以及ajax方式提交

spring mvc上傳檔案的簡單例子,這有幾個需要注意的地方 1.form的enctype=”multipart/form-data” 這個是上傳檔案必須的 2.需要依賴的jar包(網上找) 具體程式碼: 1.spring的配置檔案 1)spring

Spring MVC 多圖片 ajax form 引數 提交後臺

最近做了一個專案,需要提交多個圖片到後臺,提交的時候還要把引數提交,原來做過上傳檔案和上傳單個圖片,沒有記錄,現在記錄一下。 Spring: Spring mvc上傳配置: <!-- SpringMVC上傳檔案時,需要配置MultipartResolver處理器 -

SAP 本地檔案到內 sap gui 安全性彈出框 解決方法

本地上傳檔案到內表時候, 可以使用函式TEXT_CONVERT_XLS_TO_SAP:將xlsx,xls檔案匯入到內表 也可使用函式GUI_UPLOAD:將TXT檔案匯入到內表等 系統預設情況下,可能會產生“SAP GUI 安全性”的一個彈出框,如下圖所示: 個人研究

ABAP檔案下載 SMW0

T-CODE: SMW0 在這裡只介紹二進位制資料,HTML模板的上傳也一樣。 另外也可以用CBO TABLE管理檔案 可以看我另一個博文:CBO TABLE管理檔案上傳下載 選擇 二進位制 寫包名: 進入後點擊新建 輸入物件名稱和描述之後 按輸入按鈕 選擇檔案

關於提交給action提交兩次的問題

最近在弄SSH整合,當寫了一個表單提交給action資料時,發現每次提交都提交了兩次~~~很是鬱悶!! 當然,我用了struts標籤,如果不用標籤的話,是沒問題的! 看一下我的程式碼: <script type="text/javascript">

SpringMVC實現檔案到Tomcat指定目錄(包含pojo提交

這段時間一直在考慮畢業設計的事,在註冊上面可能會設計到檔案上傳,因此看了一下spring的官方文件中有相關的內容,整理了一下與大家分享,第一次寫博文也會有一些不合理的地方,希望大家指正。 檔案上傳demo的目錄結構    1、在spring中我感覺最重要的就是配置檔案,

PHP的單個檔案、多個檔案、多檔案

單檔案上傳 upload1.php <!doctype html> <html lang="en"> <head> <meta charset="U

Ajax提交檔案

function test(){ var form = new FormData(document.getElementById(“表單id”)); $ .ajax({     url:“表單提交路徑”,   &nb

jquery.form ajax提交檔案

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

檔案下載時,在form中設定屬性enctype=“multipart/form-data”的情況下,如何獲取提交的值?

一、問題描述 檔案上傳下載時,在form表單中設定屬性enctype=“multipart/form-data”的情況下,如何獲取表單提交的有關使用者資訊的值?(比如:textfield、radio等屬性中的值) 二、解決方法 1、情況一:沒有對user物件進行封裝 方法:

HttpClient 4 3 6 使用MultipartEntityBuilder實現類似form提交方式的檔案

分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!        

使用FromData提交,包括檔案

一、概述 FromData物件的使用: 用一些鍵值對來模擬一系列表單控制元件:即把form中所有的元素的name與value組成一個queryString。 非同步上傳二進位制檔案。 二、使用 1、建立一個空物件例項 var myform = new

JQuery ajax提交form實現檔案

<!DOCTYPE html> <html> <head>     <title></title>     <script src="https://cdn.bootcss.co

AJAX+Servlet3.0實現非同步檔案(單個檔案、多個檔案、帶檔案提交

   一、上傳單個檔案           1.JSP頁面程式碼       <%@ page language="java" contentType="text/html;

ajax 提交form檔案

搞檔案上傳,要麼使用 檔案上傳控制元件! 先非同步上傳之後獲取上傳之後的檔案內容,最後再把 檔案資訊和其他相關內容一起提交給後臺。 要麼就是一個 form表單 ,把檔案和其他資訊一把都傳向後臺!  但是form表單上傳之後, 往往都是會跳轉頁面的。 所以就想要 可以ajax 上傳檔案。 百度

springmvc中Form檔案使用ajax提交

上傳檔案這塊坑真是不少,耽誤了有幾個小時的時間,現在簡單總結一下; 首先springmvc的核心xml中配置下MultipartResolver: <!-- 配置 MultipartResolver -->     <bean id="multipart