ajaxfileupload+spring mvc 單張圖片上傳
//jsp頁面 一、首先引入ajaxfileupload.js 二、form必定要配上enctype="multipart/form-data" 三、給要上傳的file定義
一個id
<%@ page language="java" contentType="text/html;charset=utf-8" pageEncoding="utf-8"%>
<%@include file="/WEB-INF/views/common/taglib.jsp"%>
<script type="text/javascript" src="${ctx}/static/web/js/ajaxfileupload.js"></script>
<link rel="stylesheet" type="text/css" href="${ctx}/static/common/validform/validate.css"/>
<script type="text/javascript" src="${ctx}/static/common/validform/Validform_v5.3.2.js"></script>
<script>
$(function(){
$("#sub").click(function(){
var datas = $("#subForm").serialize();
var type =$("#type").val();
var toExplain=$("#toExplain").val();
var code = $("#code").val();
var uploadUrl ="${ctx}/web/mbr/vefify/proveUploadSub?type="+type+"&toExplain="+toExplain+"&code="+code;
$.ajaxFileUpload({
url:uploadUrl,
secureuri:false,
fileElementId:'pic',
dataType: 'json',
success: function (data, status){
var data = jQuery.parseJSON(data);
if(data.errCode == false){
$("#err").html("驗證碼錯誤");
}else if(data.msg == true && data.pic == "true"){
alert("上傳資料成功");
$("#err").html("");
}else if(data.msg == false && data.pic == "false"){
alert("上傳資料失敗");
alert("圖片上傳失敗");
}
},error: function (data, status, e){
alert("調用方法失敗");
}
});
});
})
</script>
<!--右邊的內容 開始-->
<div class="user_right_main">
<form:form action="" id="subForm" enctype="multipart/form-data">
<div class="user_help alert">
<font color="#FF0000">*</font> 必須是本人的真實、有效資料
</div>
<div class="user_right_border">
<div class="l">資料上傳：</div>
<div class="c">
<input type="file" name="pic" id="pic"/> 上傳最大的圖片爲1M，上傳的格式爲jpg.gif
</div>
</div>
<div class="user_right_border">
<div class="l">上傳類型：</div>
<div class="c">
<select name="type" autocomplete="off" id="type">
<option value="27">居住證(暫住證)</option>
<option value="26">住房公積金</option>
<option value="25">社保</option>
<option value="24">行駛證</option>
<option value="23">駕駛證</option>
<option value="22">地稅證</option>
<option value="21">國稅證</option>
<option value="20">生活照</option>
<option value="19">房產證</option>
<option value="18">居住地租賃合同</option>
<option value="17">水費發票或電費發票或煤氣發票（最近2個月）</option>
<option value="16">營業執照副本（須要彩色）</option>
<option value="15">機構代碼證</option>
<option value="14">公司銀行流水（近三個月）</option>
<option value="13">勞動合同或單位證實或工做證</option>
<option value="12">近3個月銀行代發工資記錄或我的轉帳存款記錄</option>
<option value="11">學位證書或畢業證書</option>
<option value="10">戶口本</option>
<option value="9">結婚證/單身證實</option>
<option value="8">家人身份證正面</option>
<option value="7">家人身份證背面</option>
<option value="6">固定電話通話記錄清單（最近2個月）</option>
<option value="5">手機通話記錄清單（最近2個月）</option>
<option value="4">借款承諾書</option>
<option value="3">信用報告 </option>
<option value="2">其餘借款說明</option>
<option value="1">其餘能說明您收入、資產、職務或素質的有效資料（凡不屬於以上內容的都放在此）</option>
</select> </div>
</div>
<div class="user_right_border">
<div class="l">備註說明：</div>
<div class="c">
<textarea cols="50" rows="5"id="toExplain" name="toExplain" ></textarea>
</div>
</div>
<div class="user_right_border">
<div class="l" style="font-weight:bold; float:left;">驗證碼：</div>
<div class="c">
<input class="code" id="code"datatype="*"name="code" type="text" maxlength="5" style=" width:118px; *margin-left:3px;" errormsg="驗證碼格式錯誤"nullmsg="請輸入驗證碼!" placeholder="請輸入驗證碼" ajaxUrl="${ctx}/web/mbr/verifyCode">
<img src="${ctx}/VerifyCode" alt="點擊刷新" onclick="this.src='${ctx}/VerifyCode?t='+Math.random();" align="absmiddle" style="cursor:pointer; display:inline-block;zoom:1;*display:inline; *float:none;height:30px;">
<span id="err" style="color: red"></span>
</div>
</div>
<div class="user_right_border">
<div class="e"></div>
<div class="c">
<input type="button" id="sub" class="btn-action" value="確認提交" size="30" />
</div>
</div>
</form:form>
</div>
//後臺上傳方法以下
/**
* 上傳方法
* liyiyi
* @param multipartFile
* @param request
* @param reqs
* @return
*/
public Map<String,Object> uploadImg(HttpServletRequest request,、
@RequestParam Map<String, Object> reqs){
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
List<MultipartFile> multipartFile = multipartRequest.getFiles("pic");
String fileName = null;
String fileType = null;
FileOutputStream fos =null;
//圖片上傳
for (MultipartFile file : multipartFile) {
fileName = file.getOriginalFilename();
fileType= fileName.indexOf(".") != -1 ? fileName.substring(fileName.lastIndexOf("."), fileName.length()) : null;
fileType = fileType.toLowerCase();
if(fileType.equals(".jpg") || fileType.equals(".png")){
if(file.getSize() > 0){
try {
byte[] bytes = file.getBytes();
} catch (IOException e1) {
// TODO Auto-generated catch block
e1.printStackTrace();
}
System.out.println("文件的大小爲"+file.getSize());
// String path = request.getSession().getServletContext().getRealPath("/upload");
String rootPath = System.getProperty("catalina.home")+File.separator+"webapps"+File.separator;
String path = rootPath+"upload";
File file2 = new File(path);
if(!file2.exists()){
System.out.println("path不存在");
file2.mkdir();
}
try {
fos = new FileOutputStream(path+File.separator+fileName);
FileCopyUtils.copy(file.getInputStream(), fos);
// String pathSuc ="localhost:8080"+File.separator+"upload"+File.separator+fileName;
reqs.put("msg","true");
reqs.put("path",fileName);
System.out.println("文件上傳成功");
} catch (Exception e) {
reqs.put("msg","false");
e.printStackTrace();
}
}
}
}
return reqs;
}
}
//在springmvc.xml中要配置，也要引入上傳的Jar包
<!-- 文件上傳解析器-->
<bean id="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver"
p:defaultEncoding="UTF-8">
</bean>
相關文章
- 1. H5單張、多張圖片上傳
- 2. MVC圖片上傳
- 3. MVC上傳圖片
- 4. 基於vue、iview單張圖片、多張圖片上傳功能
- 5. 微信上傳圖片（單張）
- 6. JS—圖片壓縮上傳（單張）
- 7. 單張圖片的上傳顯示
- 8. 使用FormData()上傳單張圖片
- 9. .net MVC 簡單圖片上傳
- 10. 上傳圖片多張
- 更多相關文章...
- • PHP 文件上傳 - PHP教程
- • Markdown 圖片 - Markdown 教程
- • Flink 數據傳輸及反壓詳解
- • Tomcat學習筆記（史上最全tomcat學習筆記）
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. H5單張、多張圖片上傳
- 2. MVC圖片上傳
- 3. MVC上傳圖片
- 4. 基於vue、iview單張圖片、多張圖片上傳功能
- 5. 微信上傳圖片（單張）
- 6. JS—圖片壓縮上傳（單張）
- 7. 單張圖片的上傳顯示
- 8. 使用FormData()上傳單張圖片
- 9. .net MVC 簡單圖片上傳
- 10. 上傳圖片多張