spring mvc+ajaxfileupload 實現非同步上傳圖片

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

1.匯入包引入js

匯入spring包以及如下包

<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.4</version>
</dependency>

<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.1</version>

</dependency>

2.spring.xml配置檔案

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <property name="defaultEncoding" value="UTF-8"/>

</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>

3.fileupload.jsp

<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html>

<head>
<title>檔案上傳</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/ajaxfileupload.js"></script>

<body>

<body>
<div >
<form modelAttribute="uploadInfo" id="uploadForm" name="uploadForm" action="bg/upload" method="post">
<div id="fileuploaddiv">
上傳檔案：<input type="file" id="apkFile" name="file"/>
<input type="button" value="上傳" onclick="ajaxFileUpload('apkFile','apkFileTip','img','filename','fileuploaddiv')"/>
<input type="text" id="filename" name="filename"/>
<span id="apkFileTip" style="width:250px"></span>
</div>
<div class="">
<button type="submit" class="btn">提交</button>
</div>
<form>
</div>

</body>
<script type="text/javascript">
/*
*fileid上傳input id
*resulttip 返回結果
*type 上傳型別
*returnfileurl 成功上傳後的檔案路徑
*/
var num =1;
function ajaxFileUpload(fileid, resulttip, type, returnfileurl,fileuploaddiv)
{
var fileiddata = $('#'+fileid).val();
if(fileiddata == null || fileiddata ==''){
$('#'+resulttip).html('請選擇檔案');
return false;
}else if (type == 'img'){
if (!/\.(jpg|jpeg|png|JPEG|JPG|PNG)$/.test(fileiddata)){
alert("圖片型別必須是.jpeg,jpg,png中的一種");
$('#'+fileid).val("");
return false;
}
}
//firefox獲取的是檔名，IE獲取的是全路徑名，正則表示式擷取檔名，判斷檔名的長度
var arrdata = fileiddata.split(/\\/);
if(arrdata[arrdata.length-1].length >30){
$('#'+resulttip).html('檔名超過限定30字元的長度');
$('#'+fileid).val("");
return false;
}

$('#'+resulttip).html('檔案上傳中');

$.ajaxFileUpload
(
{
url:'file/fileupload',//用於檔案上傳的伺服器端請求地址
secureuri:false,//一般設定為false
fileElementId:fileid,//檔案上傳空間的id屬性 <input type="file" id="file" name="file" />
dataType: 'json',//返回值型別一般設定為json
type : 'POST',
timeout:1200000, // 超時校驗 120秒超時
success: function (data) //伺服器成功響應處理函式
{
if(data.result=='suc'){
$('#'+resulttip).html('新增成功');
$('#'+fileid).val("");
if($('#'+returnfileurl).val() == null || $('#'+returnfileurl).val() ==''){
$('#'+returnfileurl).val(data.filename);
}else{
$('#'+returnfileurl).val($('#'+returnfileurl).val()+","+data.filename);
}
if(type == 'img'){
$('#'+fileuploaddiv).append("<div id='filediv"+num+"'>檔案:"+fileiddata+"<a href='javascript:void(0)' onclick='filedelete(\"filediv"+num+"\",\""+returnfileurl+"\",\""+data.filename+"\")'>刪除</a><br/></div>");
num=num+1;
}
return false;
}else if(data.result=='fnull'){
$('#'+resulttip).html('上傳的檔案不是圖片型別的檔案');
$('#'+fileid).val("");
}else if(data.result=='size2big'){
$('#'+resulttip).html('檔案尺寸超過限制,尺寸界定在2560*10240範圍內');
$('#'+fileid).val("");
}else if(data.result=='file2big'){
$('#'+resulttip).html('檔案大小超過限制,大小界定在10M範圍內');
$('#'+fileid).val("");
}else if(data.result=='exe'){
$('#'+resulttip).html('檔案格式不支援');
$('#'+fileid).val("");
}else{
$('#'+resulttip).html('新增失敗');
$('#'+fileid).val("");
}
},
error: function (data, status, e)//伺服器響應失敗處理函式
{
if('SyntaxError: illegal character' == e){
$('#'+result).html('檔案大小超過限制');
$('#'+item).val("");
}else if('SyntaxError: syntax error' == e){
$('#'+result).html('檔案上傳有誤');
$('#'+item).val("");
}else if('SyntaxError: 語法錯誤' == e){
$('#'+result).html('檔案大小超過限制');
$('#'+item).val("");
}else{
$('#'+result).html('上傳超時');
$('#'+item).val("");
}
}
}
)
return false;
}
function filedelete(filedivnum,returnfileurl,fileName){
var returnfileurlvalue = $("#"+returnfileurl).val();
returnfileurlvalue = returnfileurlvalue.replace(","+fileName,"");
returnfileurlvalue = returnfileurlvalue.replace(fileName,"");
$("#"+returnfileurl).val(returnfileurlvalue);
$("#"+filedivnum).remove();
$.ajax({
url : 'file/filedelete',
type : 'POST',
dataType : 'json',
data:{fileName:fileName},
async : false,
error : function() {
alert('Operate Failed!');
},
success : function(data) {
if (data.result=='suc'){
//alert('刪除成功!');
}
}
});
};
</script>
</html>

4.FileController.java(此處上上傳到阿里雲伺服器)

package com.zhkj.mgmt.user.web;

import java.awt.image.BufferedImage;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Random;

import javax.imageio.ImageIO;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONObject;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import com.zhkj.utils.FileOss;
import com.zhkj.utils.FileUtil;

@Controller
@RequestMapping("/file")
public class FileController {

/**
* 進入圖片上傳頁
*/
@RequestMapping(value="/gofileupload",method= RequestMethod.GET)
public String gofileupload(){
return "fileupload";
}

/**
* ajax上傳圖片
*/
@RequestMapping(value = "/fileupload", method = RequestMethod.POST)
@ResponseBody
public String fileUpload(@RequestParam(required = false) MultipartFile file, final HttpServletRequest request) {
if (file.isEmpty()){
return "{\"result\":\"fail\"}";
}
if(file.getOriginalFilename().endsWith(".exe")){
return "{\"result\":\"exe\"}";
}

//獲取字尾名，轉為小寫儲存
String suffix = (FileUtil.getExtensionName(file.getOriginalFilename())).toLowerCase();
//獲取檔名
String saveName = createDateFileName(suffix);
System.out.println(saveName);
JSONObject result = new JSONObject();
try {
if(file.getContentType().startsWith("image")){
BufferedImage buff = ImageIO.read(file.getInputStream());
if(buff == null){ // 如果上傳的圖片損壞，或者上傳的圖片為改字尾得來的，在轉為圖片流的時候，獲得的圖片流為NULL，再獲取尺寸報空指標
return "{\"result\":\"fnull\"}";
}
if(buff.getWidth() > 2560 || buff.getHeight() > 10240){ //圖片尺寸限制在 2560*10240
return "{\"result\":\"size2big\"}";
}
}
/*if(file.getSize()>(10*1024*1024)){ //檔案上傳控制在10M內，圖片和附件都在控制範圍內: 10*1024*1024
return "{\"result\":\"file2big\"}";
}*/

FileOss.ossuploadFile(saveName, file);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
result.put("result", "fail");
return result.toString();
}
result.put("result", "suc");
result.put("filename", saveName);
return result.toString();
}
public static String createDateFileName(String suffix) {
String returnPath = null;
SimpleDateFormat sf = new SimpleDateFormat("yyyyMMddHHmmss");
String fileStr = sf.format(new Date())+ new Random().nextInt(10000);
String srcFileName = fileStr + "." + suffix;
String tempPath = srcFileName.substring(0, 4)
+ srcFileName.substring(4, 6) + "/"
+ srcFileName.substring(6, 8) + "/"
+ srcFileName.substring(8, 10) + "/";
returnPath = tempPath + srcFileName;
return returnPath;
}
/**
* ajax上傳圖片
*/
@RequestMapping(value = "/filedelete", method = RequestMethod.POST)
@ResponseBody
public String filedelete(HttpServletResponse response,@RequestParam String fileName) {
JSONObject result = new JSONObject();
try {
FileOss.ossdeleteFile(fileName);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
result.put("result", "fail");
return result.toString();
}
result.put("result", "suc");
return result.toString();
}
}

spring mvc+ajaxfileupload 實現非同步上傳圖片

spring mvc+ajaxfileupload 實現非同步上傳圖片

SpringMVC+ajaxFileUpload 相容IE瀏覽器實現非同步上傳圖片

Spring MVC - MultipartFile實現檔案上傳(單檔案與多檔案上傳)

js 實現非同步上傳圖片+預覽

ajax實現非同步上傳圖片

uploadify結合ThinkPHP5上傳類實現非同步上傳圖片

Spring Mvc poi實現檔案上傳

ajaxFileUpload 非同步上傳圖片使用說明

spring boot 實現前段上傳圖片，後臺將圖片轉存的前臺伺服器(FTPClient)

thinkphp+ajaxfileupload 非同步上傳圖片

MVC非同步上傳圖片

jQuery外掛之ajaxFileUpload(非同步上傳圖片並實時顯示，並解決onchange後ajaxFileUpload失效問題)

SpringMVC中使用ajaxfileupload非同步上傳圖片檔案視訊

ckeditor添加自定義按鈕整合swfupload實現批量上傳圖片

在fragment中實現Android上傳圖片至本地JavaWeb服務器

JavaScript的FormData+Ajax實現檔案上傳+圖片上傳

thinkPHP利用ajax非同步上傳圖片並顯示、刪除

Struts框架上傳下載檔案輔助類，簡單實現Struts上傳圖片以及下載

ajax實現非同步上傳檔案

使用jsJdk非同步上傳圖片至OSS伺服器

spring mvc+ajaxfileupload 實現非同步上傳圖片

相關推薦