Using html5 ajax Java interface to implement uploading image example code

html5 image upload [File upload], I found a lot of information on the Internet, there are mainly two ways

1.from form submission

<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>

Note: enctype= "multipart/form-data" must be filled in

1.1. Submit the Java page directly:

　　@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; 
}

1.2. There are many native js and jQuery on the Internet, so I won’t go into details here.
1.2.1. Two ways to create fromData

##

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. No need to submit from form:

##

<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>

That's it for HTML. I think everyone can understand it. Now let's talk about these two submission methods. How is Ajax coded? [The from form submission method can also use js or directly submit the page to refresh]

There are also 2 types of Ajax coding:

1. Native js

function sub()
{
    var file = document.getElementById("imageFile");
    var files = file.files;
    for(var i = 0 ; i < files.length;i++)
    {
        uploadFile(files[i]);
    }
}
 
var xhr = null;
function uploadFile(file) {
    xhr = new XMLHttpRequest();
   /*  xhr.addEventListener("error", uploadFailed, false);
    xhr.addEventListener("abort", uploadCanceled, false); */
    xhr.open("post", "upload/", true); //访问控制器是upload，后面必须加&#39;/&#39;否则会报错"org.apache.catalina.connector.RequestFacade cannot be cast to org.springframework.web.multipart.Mult...",但是如果是多级的URL【例如XX/XXX/00/upload/0】又没问题了.
    var fd = new FormData();
    fd.append("userID", "1");
    fd.append("errDeviceType", "001");
    fd.append("errDeviceID", "11761b4a-57bf-11e5-aee9-005056ad65af");
    fd.append("errType", "001");
    fd.append("errContent", "XXXXXX");
    fd.append("errPic", file);
    xhr.send(fd);
    xhr.onreadystatechange = cb;
}
function cb()
{
    if(xhr.status == 200)
    {
        var b = xhr.responseText;
        if(b == "success"){
            alert("上传成功！");
        }else{
            alert("上传失败！");
        }
    }
}

2.jquery

##

function pushImg(obj) {
    debugger;
    var url = "upload/"; //访问控制器是upload，后面必须加'/'否则会报错"org.apache.catalina.connector.RequestFacade cannot be cast to org.springframework.web.multipart.Mult...",但是如果是多级的URL【例如XX/XXX/00/upload/0】又没问题了.
    var param = $("#errorParameter").val();
 
    var files = $("#imageFile").get(0).files[0]; //获取file控件中的内容
 
    var fd = new FormData();
    fd.append("userID", "1");
    fd.append("errDeviceType", "001");
    fd.append("errDeviceID", "11761b4a-57bf-11e5-aee9-005056ad65af");
    fd.append("errType", "001");
    fd.append("errContent", "XXXXXX");
    fd.append("errPic", files);
    $.ajax({
        type: "POST",
        contentType:false, //必须false才会避开jQuery对 formdata 的默认处理 , XMLHttpRequest会对 formdata 进行正确的处理
        processData: false, //必须false才会自动加上正确的Content-Type 
        url: url,
        data: fd,
        success: function (msg) {
            debugger;
            var jsonString = JSON.stringify(msg);
            $("#txtTd").text(jsonString)
            alert(jsonString);
        },
        error: function (msg) {
            debugger;
            alert("error");
        }
    });
}

Now the front-end should be almost complete, now it’s the interface. My parameters and access paths are all good, now I just need the interface service:

spring mvc framework:

@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;
    }

这是我在工作中所遇到到问题，分享给大家，希望大家不会在这个问题上花费大量的时间。谢谢

The above is the detailed content of Using html5 ajax Java interface to implement uploading image example code. For more information, please follow other related articles on the PHP Chinese website!