ホームページ >ウェブフロントエンド >H5 チュートリアル >html5 ajax Java インターフェイスを使用して画像のアップロードのサンプル コードを実装する
html5画像アップロード[ファイルアップロード]、インターネット上で多くの情報を見つけましたが、主に2つの方法があります
1.フォーム送信方法から
<form action="pushUserIcon" method="post" enctype="multipart/form-data"> <table> <tr> <td width="50" align=left>图片:</td> <td><input type="file" name="file"/></td> </tr> <tr> <td width="50" align="left">用户id:</td> <td><input type="text" name="userId"/></td> </tr> <tr> <td><input type="submit"> </td> </tr> </table> </form>
注: enctype="multipart/form-data" を入力する必要があります。 in
1.1. Java ページの直接送信:
1.2 オンラインにはネイティブ JS と jQuery がたくさんあるので、ここでは詳しく説明しません。 1.2.1. fromData を作成する 2 つの方法
@RequestMapping(value="/pushUserIcon",method=RequestMethod.POST) @ResponseBody public String pushUserIcon(HttpServletRequest request, HttpServletResponse response) throws IOException,BaseException { String result = null; String userId = request.getParameter("userId"); try{ //转型为MultipartHttpRequest(重点的所在) MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request; //获得第1张图片(根据前台的name名称得到上传的文件) MultipartFile file = multipartRequest.getFile("file"); result = uploadImageServic.uploadFile(file, request, userId); System.out.println("result:" + result); response.setContentType("text/html;charset=utf8"); response.getWriter().write("result:" + result); }catch(Exception e){ BaseException baseException = new BaseException(e); baseException.setErrorMsg("Upload API Exception"); throw baseException; } return null; }
2. from フォームを使用せずに送信する:
rreeeこれはすべて HTML です、私これら 2 つの送信メソッドについて話しましょう。Ajax はどのようにコーディングされていますか? [フォームからの送信方法は、js を使用することも、ページ更新を直接送信することもできます]
Ajax コーディングには 2 種類もあります: 1. ネイティブ jsvar formData = new FormData($("#myForm")[0]);//用form 表单直接 构造formData 对象; 就不需要下面的append 方法来为表单进行赋值了。
//var formData = new FormData();//构造空对象,下面用append 方法赋值。
// formData.append("policy", "");
// formData.append("signature", "");
// formData.append("file", $("#file_upload")[0].files[0]);
2.jquery
<table style="border: 1px solid black; width: 100%">
<tr>
<td width="50" align=left>图片:</td>
<td><input type="file" id="imageFile" name="img" multiple="multiple"/></td>
<td>
<input type="button" value="调用" onclick="pushImg()" />
</td>
</tr>
</table>
@RequestMapping(value = { "upload" }) public void pushErrorData(HttpServletRequest request, HttpServletResponse response) throws BaseException { String userID=request.getParameter("userID"); // 转型为MultipartHttpRequest(重点的所在)这个就是上面ajax中提到如果直接访问此接口而不加"/",此转型就会报错 MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request; //MultipartFile file = multipartRequest.getFiles("errPic");//获取文件集合 对应 jquery $("#imageFile").get(0).files // 获得第1张图片(根据前台的name名称得到上传的文件) MultipartFile file = multipartRequest.getFile("errPic"); //对应 jquery $("#imageFile").get(0).files[index] Map<String, Object> map = new HashMap<String, Object>(); if (null!=file && !file.isEmpty()) { try { map = Common.uploadFile(file); } catch (IOException e) { BaseException baseException = new BaseException(e); //baseException.setErrorMsg(imgErrorMsg); throw baseException; } } } /** * 图片上传 * * @param file * @return * @throws IOException * @throws BaseException */ public static Map<String, Object> uploadFile(MultipartFile file) throws IOException, BaseException { String fail = ConfigBundleHelper.getValue("busConfig", "fail");//上传失败状态 String success = ConfigBundleHelper.getValue("busConfig", "success");//上传成功状态 String errorMsg = ConfigBundleHelper.getValue("busConfig","imgErrorMsg");//上传错误信息 String filePath = ConfigBundleHelper.getValue("busConfig", "filePath");//上传路径,本来是相对路径,但是在发布后路径会创建在tomcat的bin目录下,所以接口上传的路径是一个难题,我用的是绝对路径,等到发布到Linux环境中,通过配置文件修改路径为Linux中的资源地址【防止工程删除而资源文件不会丢失】,然后重新发布工程时再通过Linux的命令把我们需要的资源文件导入到我们发布的工程项目中。 String size = ConfigBundleHelper.getValue("busConfig", "fileSize"); String interfaceService = ConfigBundleHelper.getValue("busConfig", "interfaceService"); long maxFileSize = (Integer.valueOf(size)) * 1024 * 1024; String suffix = file.getOriginalFilename().substring( file.getOriginalFilename().lastIndexOf(".")); long fileSize = file.getSize(); Map<String, Object> map = new HashMap<String, Object>(); if (suffix.equals(".png") || suffix.equals(".jpg")) { if (fileSize < maxFileSize) { // System.out.println("fileSize"+fileSize); String fileName = file.getOriginalFilename(); fileName = new String(fileName.getBytes("ISO-8859-1"), "UTF-8"); File tempFile = new File(filePath, new Date().getTime() + fileName); try { if (!tempFile.getParentFile().exists()) { tempFile.getParentFile().mkdirs();//如果是多级文件使用mkdirs();如果就一层级的话,可以使用mkdir() } if (!tempFile.exists()) { tempFile.createNewFile(); } file.transferTo(tempFile); } catch (IllegalStateException e) { BaseException baseException = new BaseException(e); baseException.setErrorMsg(errorMsg); throw baseException; } map.put("SUCESS", success); map.put("data",interfaceService + filePath + new Date().getTime() + tempFile.getName()); } else { map.put("SUCESS", fail); map.put("data", "Image too big"); } } else { map.put("SUCESS", fail); map.put("data", "Image format error"); } return map; }
这是我在工作中所遇到到问题,分享给大家,希望大家不会在这个问题上花费大量的时间。谢谢
以上がhtml5 ajax Java インターフェイスを使用して画像のアップロードのサンプル コードを実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。