MySQL+SSM+Ajax를 이용한 이미지 업로드 문제 분석(그림)

이 글에서는 MySQL+SSM+Ajax이미지 업로드 문제를 주로 소개합니다. 매우 좋은 참조 값을 가지고 있습니다. 아래 에디터로 한번 살펴보겠습니다

이미지 업로드 코드를 처음 작성해서 문제가 많았습니다. 어제 하루종일 작업해서 저녁에 드디어 성공했습니다. 큰 소리로 환호합니다.

그런데 다 끝내고도 아직도 알 수 없는 질문이 많아요. 따라서 여기서는 메모를 작성하는 것으로 간주할 수 있으며, 나중에 잊어버린 경우 각계각층의 친구에게 조언을 구하는 것으로 간주할 수도 있습니다. (^_^)

Q.1. 인터넷에서는 Ajax가 파일을 업로드할 수 없다고 하는데, 이렇게 말하는 사람도 많지 않고, 아직도 Ajax를 통해 업로드한 파일을 공유하는 사람들이 많습니다.

Ajax를 통해서는 아니고 결국 AjaxSubmit 방식으로 작성했습니다.

Q.2. AjaxSubmit 메소드에는 업로드되는 파일 크기에 대한 기본 제한이 있나요? 100KB보다 큰 파일을 선택하면 성공적으로 업로드되지 않지만, 100KB보다 작으면 성공합니다.

100KB를 초과하여 업로드하면 브라우저 콘솔에서 다음 프롬프트를 반환합니다. 그는 여전히 ajaxSubmit의 성공 메소드를 실행하고 textStatus의 값을 성공으로 반환했지만 XMLHttpRequest에서 반환된 HTML 코드 내용과 errorThrown의 응답seText은 내가 봄에 그랬습니다- 예외 처리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; 
}

Front-endHTML form:

<form id="imgForm" > 
　　<p class="modal-content">
 　　<p class="modal-header">
   <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
   <h4 class="modal-title" id="myModalLabel">修改头像</h4>
  </p>
  <p class="modal-body">
  　　<input type="file" id="imgFile" name="imgFile"/> 
   <input id="imgId" name="userId" value="${user.id }" style="display:none" />
  </p>
  <p 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>
  </p>
 </p>
</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; 
 }

사용자 엔터티 클래스의 사진은 byte[] 유형입니다.

데이터베이스 사진은 longblob입니다.

매퍼 매퍼:

<!-- 更新图片 -->
 <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>

위 내용은 MySQL+SSM+Ajax를 이용한 이미지 업로드 문제 분석(그림)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!