有的朋友可能对于“用html5 ajax Java接口实现上传图片实例代码”还有很多不明白的地方，下面由77ISP云服务器技术小编为大家讲解一下，下面我们来一起看看吧！

html5图片上传【文件上传】，在网上找了很多资料，主要也就2种

1.from表单提交的方式

 
        
 
            
图片：
 
            
            
        
 
        
 
            
用户id：
 
            
            
        
        

            
 
        
    

注意： enctype=”multipart/form-data” 必须要填

1.1.Java页面直接提交：

　　@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.原生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表单提交：

     

            
图片：
 
            

            

                
            
        
       

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

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]
            Map map = new HashMap();
            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 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 map = new HashMap();
        if (suffix.equals(".png") || suffix.equals(".jpg")) {
            if (fileSize

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

以上就是“用html5 ajax Java接口实现上传图片实例代码”的详细内容，更多请关注77isp云服务器技术网其它相关文章！