SpringMVC和jQuery的Ajax簡單檔案上傳下載示例

準備工作:
前端引入:1、jquery，我在這裡用的是：jquery-1.10.2.min.js
2、ajaxfileupload.js
這裡可能會報一些錯，所以在json判斷那裡修改為（網上也有）：
Js程式碼

if ( type == "json" ){
data = r.responseText;
var start = data.indexOf(">");
if(start != -1) {
var end = data.indexOf("<", start + 1);
if(end != -1) {
data = data.substring(start + 1, end);
}
}
eval( "data = " + data );
}

末尾那裡補充一段：
Js程式碼

handleError: function( s, xhr, status, e ) {
if ( s.error ) {
s.error.call( s.context || window, xhr, status, e );
}
if ( s.global ) {
(s.context ? jQuery(s.context) : jQuery.event).trigger ( "ajaxError", [xhr, s, e] );
}
}

後臺匯入spring的jar包，我這裡用的是：spring3.0.5
在spring.xml裡配置如下：
Xml程式碼

<bean id="multipartResolver"

class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="defaultEncoding" value="UTF-8"/>
<!-- 不在這裡限制了,後臺各自進行限制了
<property name="maxUploadSize" value="2000000"/>
-->
</bean>
<bean id="exceptionResolver" class="org.springframework.web.servlet.handler.SimpleMappingExceptionResolver">
<property name="exceptionMappings">
<props>
<prop key="org.springframework.web.multipart.MaxUploadSizeExceededException">/page/html/errorGolbal.html</prop>
</props>
</property>
</bean>

這裡就充分利用框架的便利性幫你都做好了，如果你不在xml裡配置這些，那麼在controller那裡，request.getInputStream()得到的這個流不全是檔案流，還包含了其他，需要你自己編碼去解析，當然，要解析的話還要知道http相關報文解析知識，所以這裡可以充分利用框架的便利性，有興趣的可以研究下

好了，準備工作做好了，看下前端的具體程式碼：
Html程式碼

<div id="fileUpLoad" class="manage">
添附檔案
<input type="file" id="btnFile" name="btnFile" onchange="txtFoo.value=this.value;com.company.project.services.newCase.fileUpLoad()" hidden="hidden" />
<input type="text" id="txtFoo" readonly="readonly" style="width: 300px" />
<button onclick="btnFile.click()" style="height: 25px;">選擇檔案</button>
</div>

js程式碼為：
Js程式碼

if (!window.com) {
window.com = {};
}
if (!window.com.company) {
window.com.company= {};
}
if (!window.com.company.project) {
window.com.company.project= {};
}
if (!window.com.company.project.services) {
window.com.company.project.services = {};
}
if (!window.com.company.project.services.newCase) {
window.com.company.project.services.newCase = {};
}
//生成隨機guid數(參考網上)
com.company.project.services.newCase.getGuidGenerator = function() {
var S4 = function() {
return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
};
return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
};
//上傳檔案
com.company.project.services.newCase.fileUpLoad = function(){
var fileName = $("#btnFile").val();//檔名
fileName = fileName.split("\\");
fileName = fileName[fileName.length-1];
var guid = com.company.project.services.newCase.getGuidGenerator();//唯一標識guid
var data = {guid:guid};
jQuery.ajaxSettings.traditional = true;
$.ajaxFileUpload({
url : '/PROJECT/function.do?method=fileUpLoad',
secureuri : false,//安全協議
fileElementId:'btnFile',//id
type : 'POST',
dataType : 'json',
data:data,
async : false,
error : function(data,status,e) {
alert('Operate Failed!');
},
success : function(json) {
if (json.resultFlag==false){
alert(json.resultMessage);
}else{
alert('檔案上傳成功!');
var next = $("#fileUpLoad").html();
$("#fileUpLoad").html("<div id='"+guid+"'>"+"檔案:"+fileName+" <a href='#' onclick='com.company.project.services.newCase.filedelete("+"\""+guid+"\""+","+"\""+fileName+"\""+")'>刪除</a>"+"<br/></div>");
$("#fileUpLoad").append(next);
}
}
});
};
//檔案刪除
com.company.project.services.newCase.filedelete = function(guid,fileName){
jQuery.ajaxSettings.traditional = true;
var data = {guid:guid,fileName:fileName};
$.ajax({
url : '/PROJECT/function.do?method=filedelete',
type : 'POST',
dataType : 'json',
data:data,
async : false,
error : function() {
alert('Operate Failed!');
},
success : function(json) {
if (json.resultFlag==false){
alert(json.resultMessage);
}else{
alert('刪除成功!');
$("#"+guid).remove();
}
}
});
};

----------------------------------------------------------------------------------

注：如果你對ajax不熟悉，或者由於瀏覽器等原因，致使上述方式提交出現各種問題，那麼你可以用form表單形式提交,程式碼片段如下：
Html程式碼

<div id="fileUpLoad" class="manage">
<form id="needHide" action="/工程/function.do?method=fileUpLoad" method="post" enctype="multipart/form-data" target = "hidden_frame">
<input type="file" id="btnFile" name="btnFile" onchange="txtFoo.value=this.value;com.company.project.services.newCase.fileUpLoad()" hidden="hidden"/>
</form>
添附檔案
<input type="text" id="txtFoo" readonly="readonly" style="width: 300px" />
<button onclick="btnFile.click()" style="height: 25px;">選擇檔案</button>
相關推薦

SpringMVC和jQuery的Ajax簡單檔案上傳下載示例

準備工作: 前端引入:1、jquery，我在這裡用的是：jquery-1.10.2.min.js         2、ajaxfileupload.js 這裡可能會報一些錯，所以在json判斷那裡修改為（網上也有）： Js程式碼

SpringMVC筆記八之檔案上傳下載

一、檔案上傳 1、普通檔案上傳新建頁面WebContent/file.jsp <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>

使用PuTTy實現windows和linux之間檔案上傳下載

windows上下載完整的PuTTy安裝包而不僅僅是putty.exe這一個檔案。 PuTTy包中包含多個exe檔案，有putty和psftp等exe檔案。 putty只用於登入linux伺服器，在伺服器上進行相關操作，沒有與自己電腦連線，不能與進行上傳下載。 psftp用

SpringMVC的檔案下載功能（附上完整的springmvc的檔案上傳下載示例）

========================================================== 以下使用maven建立檔案上傳下載 ============================ pom.xml <project xmlns="h

SpringMVC教程3【檔案上傳下載，靜態資源處理及資料校驗】

一，檔案上傳 web.xml配置通用 <?xml version="1.0" encoding=&q

使用springmvc 和nginx 搭建一個檔案上傳下載伺服器

public final class FileUploadUtil { public static JSONObject upload(String httpurl, String fileName, InputStream inputStream) { String result

在SpringMVC框架中實現檔案上傳和下載

首先在springmvc.xml中配置檔案上傳的屬性  <bean id="multipartResolver" class="org.springframework.web.multi

SpringMVC實現頁面和java模型的資料互動以及檔案上傳下載和資料校驗

1. 專案結構 2.  springMVC-servlet.xml 配置檔案 <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org

關於SpringMVC框架實現簡單的檔案上傳下載(ssm)

關於ssm框架整合檔案的上傳和下載. 1.首先建立一個用來測試的jsp檔案上傳下載的頁面程式碼如下 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding

linux壓縮和解壓縮命令，stp本地檔案上傳下載和ssh連線與傳輸

linux 上檔案解壓縮指令 tar命令　　解包：tar zxvf FileName.tar 　　打包：tar czvf FileName.tar DirName 　　　　解壓：tar zxvf FileName.tar.gz 　　壓縮：tar zcvf FileName.

struts2攔截器和檔案上傳下載

一、攔截器(Interceptor) 攔截器是動態攔截Action呼叫的物件，攔截器將Action共用的行為獨立出來，在Action執行前後執行。這也就是我們所說的AOP，它是分散關注的程式設計方法，它將通用需求功能從不相關類之中分離出來；同時，能夠共享一個行為，一旦行為發生變化，不必修改很

Struts的攔截器和檔案上傳下載

攔截器首先新建一個攔截器的類,類實現Interceptor介面,記得是xwork2包下的重寫三個方法,在intercept的方法中執行攔截器前後需要執行的操作, 執行前後的區分為 String invoke=actionInvocation.invoke();//放行在這行

springmvc檔案上傳/下載

檔案上傳 1，配置檔案上傳解析器在springmvc-servlet.xml中配置 <bean id="multipartResolver" class="org.springframework.web.multipart.commons.Commons

IO流和檔案上傳下載

fileUploadServlet核心介面form(enctype=multipart/form-data)DiskFileItemFactory();FileItemFactory();servletFileUpload();setHeaderEncoding();setSizeMax();setFileS

基於Java的一個簡單的檔案上傳下載功能

最近在公司給客戶端做介面，有一個圖片上傳和檔案下載的功能，本來想用Struts來做檔案上傳下載，但是看了下公司好像沒有這個配置，然後看了下同事的程式碼，才發現原來Apache也可以簡單的實現檔案上傳下載。首先引入commons-io-2.2.jar FileUtils為我

SpringMVC——實現檔案上傳下載

一、檔案上傳 1.引入依賴包在pom.xml檔案中新增如下內容，引入 commons-fileupload 和 commons-io 兩個包。 <dependency> <groupId>commons-f

SpringBoot檔案上傳下載和多檔案上傳（圖文詳解）

最近在學習SpringBoot，以下是最近學習整理的實現檔案上傳下載的java程式碼： 1、開發環境： IDEA15+ Maven+JDK1.8 2、新建一個maven工程： 3、工程框架 4、pom.xml檔案依賴項 <proje

簡單的node檔案上傳下載及中文亂碼問題解決

1. 基於MEAN的技術棧，使用restful風格的介面2. 在前端程式碼中放置檔案上傳按鈕和處理表單資料<div class="upload-file btn btn-sm btn-primary mb-2"> <span><i class

SSM框架-SpringMVC 例項檔案上傳下載

目錄(?)[+] 本文詳細講解了SpringMVC例項單檔案上傳、多檔案上傳、檔案列表顯示、檔案下載。一、新建一個Web工程，匯入相關的包 springmvc的包+commons-fileupload.jar+connom-io.jar+com

JQueryAjax使用SpringMVC中MultipartFile進行檔案上傳的整合

對於一個帶有檔案上傳的表單，後臺使用springMVC封裝的MultipartFile file接收檔案，並且需要使用非同步提交，並返回相應的提示資訊在這種情況下，我最開始使用了好幾種方法第一種：普通的JQUERY的AJAX，但是後臺一旦使用MultipartFile

SpringMVC和jQuery的Ajax簡單檔案上傳下載示例

相關推薦