溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
MySQL數據庫使用SSM和Ajax如何實現一個圖片上傳功能？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。
第一次寫上傳圖片的代碼，碰到很多問題。昨天做了整整一天，終于在晚上的時候成功了。大聲歡呼。
但是，做完之后，還是有很多問題想不通。所以在這里也算是寫個筆記，日后忘記了可以回顧，也算請教各路朋友。（^_^）
Q.1. 網上說Ajax不能上傳文件，但是這個說法并不是很多，也還是有蠻多通過Ajax上傳文件的分享。
我也沒有通過Ajax做出來，最后是通過AjaxSubmit這個方法寫的。
Q.2. AjaxSubmit這個方法對文件上傳的大小有默認限制吧。我選擇大于100KB的文件上傳就不能成功，小于100KB的就可以成功。
上傳大于100KB的時候，瀏覽器console返回下面的提示。說明他還是執行了ajaxSubmit的success方法，并返回textStatus的值為success，但是XMLHttpRequest, 和 errorThrown的responseText返回的HTML代碼內容是我在spring-web.xml配置的異常處理視圖網頁。
js代碼（提交表單事件）：
function postImg(){
if ($.trim($("#imgFile").val()) == "") {
alert("請選擇圖片！");
return;
}
console.log($("#imgFile")[0].files[0].size);//小于100*1024，下面的請求就可以成功
var option = {
url : '/cloudnote/user/insertUserPhoto.do',
type : 'POST',
// dataType : 'json',
headers : {"ClientCallMode" : "ajax"}, //添加請求頭部
success : function(XMLHttpRequest, textStatus, errorThrown){
console.log(XMLHttpRequest);
console.log(textStatus);
console.log(errorThrown);
console.log("前端輸出上傳成功");
$("#imgClose").click();
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
console.log(XMLHttpRequest);
console.log(textStatus);
console.log(errorThrown);
console.log("前端輸出上傳失敗");
}
};
$("#imgForm").ajaxSubmit(option);
return false;
}前端HTML表單：
<form id="imgForm" >
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h5 class="modal-title" id="myModalLabel">修改頭像</h5>
</div>
<div class="modal-body">
<input type="file" id="imgFile" name="imgFile"/>
<input id="imgId" name="userId" value="${user.id }" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" id="imgClose">關閉</button>
<button type="button" class="btn btn-primary" onclick="postImg();" id="imgSubmit">上傳</button>
</div>
</div>
</form>下面是后臺的java代碼（Controller）
//更新用戶頭像
@RequestMapping(value="/insertUserPhoto.do",method = RequestMethod.POST)
public void insertUserPhoto(
HttpServletRequest req, HttpServletResponse res){
System.out.println("----- 插入圖片 -------");
try{
String id = req.getParameter("userId");
System.out.println(id);
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) req;
MultipartFile file = multipartRequest.getFile("imgFile");
byte[] photo = file.getBytes();
boolean result = serv.insertUserPhoto(id, photo);
res.setContentType("text/html;charset=utf8");
res.getWriter().write("result:" + result);
}catch(Exception e){
e.printStackTrace();
}
System.out.println("----- 插入圖片end -------");
}
/**
* 讀取用戶頭像
* @param req
* @param res
*/
@RequestMapping(value="/readPhoto.do", method=RequestMethod.GET)
public void readPhoto(HttpServletRequest req, HttpServletResponse res){
System.out.println("------readPohto-----");
String id = Utils.getSessionUserId(req);
try {
User user = serv.selectUserPhoto(id);
res.setContentType("image/jpeg");
res.setCharacterEncoding("utf-8");
OutputStream outputStream = res.getOutputStream();
InputStream in = new ByteArrayInputStream(user.getPhoto());
int len = 0;
byte[] buf = new byte[1024];
while((len = in.read(buf,0,1024)) != -1){
outputStream.write(buf, 0, len);
}
outputStream.close();
} catch (IOException e) {
e.printStackTrace();
}
System.out.println("-----readPohto end-----");
return;
}Service實現類
//查找用戶圖片（頭像）
public User selectUserPhoto(String id) throws ImageException {
User user = userDao.findUserById(id);
if(user == null){
throw new UserNameException("用戶名不存在!");
}
Map<String, Object> data = userDao.selectUserPhoto(id);
System.out.println(data);
user.setPhoto((byte[]) data.get("photo"));
return user;
}
//更新用戶圖片（頭像）
public boolean insertUserPhoto(String userId, byte[] photo) throws ImageException, UserNameException {
if(userId == null || userId.trim().isEmpty()){
throw new UserNameException("用戶id不存在");
}
User user = userDao.findUserById(userId);
if(user == null){
throw new UserNameException("用戶不存在");
}
user.setPhoto(photo);
int n = userDao.updateUserPhoto(user);
System.out.println("插入圖片：" + n);
return n==1?true:false;
}實體類User的photo 是 byte[] 類型的；
數據庫的photo是 longblob：
mapper映射器：
<!-- 更新圖片 -->
<update id="updateUserPhoto" parameterType="cn.tedu.note.entity.User">
UPDATE user set id = #{id}, photo = #{photo,jdbcType=BLOB} <!-- 這里試了，如果不加jdbcType=BLOB 會出錯，雖然不是很理解，但也照做了 -->
WHERE id = #{id}
</update>
<!-- 獲取圖片 -->
<select id="selectUserPhoto" parameterType="String" resultType="Map">
SELECT id as id, photo as photo from user
WHERE id=#{id}
</select>Spring-web.xml配置
<!-- 文件上傳表單的視圖解析器 --> <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <property name="maxUploadSize"><value>100000</value></property> <property name="defaultEncoding"><value>UTF-8</value></property> </bean>
看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
