MySQL+SSM+Ajaxによる画像アップロードの問題の分析（写真）

この記事では主に画像をMySQL+SSM+Ajaxにアップロードする際の問題を紹介します。非常に良い基準値を持っています。以下のエディターで見てみましょう

初めて画像をアップロードするコードを書いたとき、多くの問題に遭遇しました。昨日は一日中作業して、夕方やっと完成しました。大声で乾杯します。

しかし、終わってみても分からない疑問がたくさんあります。したがって、ここでメモを書くことは、将来忘れてしまった場合に復習することとみなすことができます。また、さまざまな立場の友人にアドバイスを求めることもできます。 (^_^)

Q.1. Ajaxではファイルがアップロードできないと言われていますが、そう言う人は少なく、未だにAjax経由でファイルをアップロードするシェアが多いです。

結局、Ajax 経由ではなく、AjaxSubmit メソッド経由で書きました。

Q.2. AjaxSubmitメソッドにはファイルアップロードのサイズにデフォルトの制限がありますか？ 100 KB を超えるファイルを選択すると、アップロードは成功しませんが、100 KB 未満の場合は成功します。

100KBを超えるものをアップロードすると、ブラウザコンソールは次のプロンプトを返します。これは、彼がまだ ajaxSubmit の success メソッドを実行し、textStatus の値を success として返していることを示していますが、XMLHttpRequest によって返された HTML コードの内容と、errorThrown の応答seText は spring-web で設定した例外処理です。 xml ViewWeb ページ。

jscode (submit formevent):

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" > 
　　<p class="modal-content">
 　　<p class="modal-header">
   <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
   <h4 id="修改头像">修改头像</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コード(コントローラー)です りー

サービスの実装 クラス

//更新用户头像
 @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;
 }

エンティティクラスの写真 ユーザーはbyte[]タイプです;

データベースの写真はlongblobです:

mapperマッパー:

//查找用户图片（头像）
 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; 
 }

Spring-web.xml構成りー

以上がMySQL+SSM+Ajaxによる画像アップロードの問題の分析（写真）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。