html5 ajax Java インターフェイスを使用して画像のアップロードのサンプルコードを実装する-H5 チュートリアル-php.cn

html5 ajax Java インターフェイスを使用して画像のアップロードのサンプルコードを実装する

零下一度

リリース： 2018-05-11 14:40:20

オリジナル

4089 人が閲覧しました

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. ネイティブ js

var 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 サイトの他の関連記事を参照してください。