用html5 ajax Java接口实现上传图片实例代码

1.From表单提交的方式

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" 必须要填

1.1.Java页面直接提交：

　　@RequestMapping(value="/pushUserIcon",method=RequestMethod.POST)@ResponseBodypublic 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.原生js 和jquery的网上有很多，这里就不多说了。
1.2.1. 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.不用from表单提交：

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>
    

HTML就这些，我想大家应该都能看懂，下面就要说说这2种提交方式，Ajax是如何编码？【from表单提交方式也可以使用js或者直接提交页面刷新】

Ajax编码也有2种：
1.原生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，后面必须加'/'否则会报错"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");
        }
    }
    );
}
    

现在前端的就应该差不多了，现在就是接口了，我的参数和访问路径都好了，现在就差接口服务了：
spring mvc框架：

@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]            MapString, Object>
     map = new HashMapString, 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 MapString, 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();
            MapString, Object>
     map = new HashMapString, 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接口实现上传图片实例代码的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！