添加依賴關係
由於本項目是在maven項目管理工具下開發的,所以需要在pom.xml文件裏添加如下依賴關係
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
</dependency>
- 在spring.xml中添加文件上傳限制
<bean id="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="defaultEncoding" value="utf-8" />
<property name="maxUploadSize" value="10485760000" />
<property name="maxInMemorySize" value="40960" />
</bean>
defaultEncoding="UTF-8" 是請求的編碼格式,默認爲iso-8859-1
maxUploadSize="5400000" 是上傳文件的大小,單位爲字節
maxInMemorySize 配置緩存
- 前臺上傳實現
<div id="win" class="easyui-dialog" title="修改**" closed="true"
style="width: 400px; height:auto;"
data-options="iconCls:'icon-save',modal:true,collapsible:false,minimizable:false,maximizable:false,buttons:'#bbs';}">
<form id="satmpdefForm" action="http://localhost:8080/mainWeb/system/saveStampdefByForm/" style="padding: 10px 20px 10px 40px;"
enctype="multipart/form-data" method="post">
<table>
<tr>
<td>標題:</td>
<td><input type="text" name="sTitle" id="sTitle"
class="easyui-textbox" style="width: 250px;" required="required"></td>
</tr>
<tr>
<td>是否加密:</td>
<td><input name="benc" id="benc" class="easyui-combobox" style="width: 250px;"
data-options="editable:false,panelHeight:'auto',valueField:'v',textField:'t',
data:[{v: '0',t: '未加密'},{v: '1',t: '加密'}]" value="0"/>
</td>
</tr>
<tr>
<td>密碼:</td>
<td><input type="password" name="password" id="password"
class="easyui-textbox" style="width: 170px;"><a class="easyui-linkbutton" id="cgePwd" icon="icon-edit" onClick="changePwd()">修改密碼</a></td>
</tr>
<tr>
<td>使用者:</td>
<td><input type="text" name="userID" id="userID" required="required"
class="easyui-textbox" style="width: 250px;"></td>
</tr>
<tr>
<td><input type="hidden" id="rid" name="rid" class="easyui-textbox" /></td>
</tr>
<tr>
<td></td>
<td><input name="imgFile" id="imgFile" type="file" required="required"
style="width: 100%" accept="image/png,image/jpeg,image/gif"></td>
</tr>
</table>
<div id="Imgdiv" align="center">
<img id="Img" width="200px" height="200px" alt="預覽圖">
</div>
</form>
</div>
<div id="bbs">
<a class="easyui-linkbutton" icon="icon-ok" onClick="submitForm()">保存</a>
<a class="easyui-linkbutton" icon="icon-cancel" onClick="closeWin()">取消</a>
</div>
- 提交表單
//提交表單數據
function submitForm() {
var form = new FormData($('#satmpdefForm')[0]);
$.ajax({
url: 後臺處理路徑
type: 'post',
data: form,
processData:false,
contentType:false,
success:function(data){
$.messager.show({
title : '提示',
msg : '提交成功',
timeout : 3000,
showType : 'slide'
});
$('#win').window('close');
refresh(ctx);
},
error:function(e){
showError('提交失敗');
}
});
}
- controller層
@RequestMapping("saveStampdefByForm")
@ResponseBody
public void saveStampdefByForm(MultipartFile imgFile, String rid,
String sTitle, String userID, String password, int benc,
HttpServletRequest request) throws Exception
{
InputStream inputStream = imgFile.getInputStream();
if ((inputStream.available()) != 0)
{
// inputStream.available()返回文件的字節長度
data = new byte[inputStream.available()];
//// 將文件中的內容讀入到數組中
inputStream.read(data);
inputStream.close();
}