如何通过单击控制器不同的同一个JSP页面的两个不同按钮来开发两个调用ajax？-Java 学习之路

我正在开发一份 Spring 季员工登记表 . 我使用了两个ajax调用，一个用于员工信息，另一个用于上传e文件（图像），并将它们存储在单个jsp页面和单个控制器中的特定文件夹中 . 这是我的jsp页面：

function onuploadCall(){

    var file = $('[name="file"]');
    console.log(file);
   var filename = $.trim(file.val());
   console.log(filename);
     //var imgContainer = $('#imgContainer');

    var formData = new FormData();
    formData.append('file', jQuery('input[type=file]')[0].files[0]);

    $.ajax({
        url: "http://localhost:8080/EmployeeRegistrationForm/echofile",
        type: "POST",
        async:true,
        data: formData,
        enctype: "multipart/form-data",
        processData: false,
        modelAttribute:'uploadedFile',
        contentType: true,

       success: function(response){

            var obj = JSON.parse(response);
            alert(response);

        },

        error: function(){                      
            alert('Error while request..');
        }
    });
     /*  }).done(function(data) {
         // imgContainer.html('');
          var img = '<img src="data:' + data.contenttype + ';base64,'
              + data.base64 + '"/>';
         alert("success");
         // imgContainer.append(img);
      }).fail(function(jqXHR, textStatus) {
          //alert(jqXHR.responseText);
          alert('File upload failed ...');
      });    */
}
function madeAjaxCall(){


    array();
     var gender = $('#gender').val();
     var blood = $('#blood').val();


    $.ajax({
        type: "post",
        url: "http://localhost:8080/EmployeeRegistrationForm/employee",
        cache: false,       
        async:false,


       data:'name=' + $("#name").val() 
           +"&fname=" + $("#fname").val() 
           +"&mname=" + $("#mname").val() 
           +"&nid=" + $("#nid").val() 
           +"&age=" + $("#age").val()
           +"&blood=" + blood
           +"&gender=" + gender 
           +"&caddress=" + $("#caddress").val() 
           +"&paddress=" + $("#paddress").val()
           +"&paddress=" + $("#paddress").val()
           +"&pdegree=" + $("#pdegree").val()
           +"&puniversity=" + $("#puniversity").val()
           +"&pyear="+ $("#pyear").val()
           +"&presult=" + $("#presult").val()
           +"&mdegree=" + $("#mdegree").val()
           +"&muniversity=" + $("#muniversity").val()
           +"&mresult=" + $("#mresult").val()
           +"&myear=" + $("#myear").val()
           +"&bdegree=" + $("#bdegree").val()
           +"&buniversity=" + $("#buniversity").val()
           +"&bresult=" + $("#bresult").val()
           +"&byear=" + $("#byear").val()
           +"&hdegree=" + $("#hdegree").val()
           +"&college=" + $("#college").val()
           +"&hresult=" + $("#hresult").val()
           +"&hyear=" + $("#hyear").val()
           +"&sdegree=" + $("#sdegree").val()
           +"&school=" + $("#school").val()
           +"&sresult=" + $("#sresult").val()
           +"&syear=" + $("#syear").val()
           +"&date=" + $("#date").val()
           +"&department=" + $("#department").val()
           +"&location=" + $("#location").val()
           +"&company=" + company
           +"&from=" + from
           +"&to=" + to
           +"&year=" + year
           +"&organization=" + organization
           +"&topic=" + topic
           +"&duration=" + duration,

        success: function(response){

            var obj = JSON.parse(response);
            alert(response);

        },

        error: function(){                      
            alert('Error while request..');
        }
    });
}

这是我的控制器：

@Controller
public class imageUploadController {

     @RequestMapping(value = "/echofile",method = RequestMethod.POST)
        public @ResponseBody HashMap<String, Object> echoFile(MultipartHttpServletRequest request,
                HttpServletResponse response ,  @ModelAttribute("uploadedFile") UploadedFile upldfile) throws Exception {

            InputStream inputStream = null;
            OutputStream outputStream = null;
           MultipartFile multipartFile = request.getFile("file");

            MultipartFile file = upldfile.getFile();
            String fileName = multipartFile.getOriginalFilename();
            System.out.println("vcvvvvvvvv"+fileName);
            upldfile.setFile(file);

            Long size = file.getSize();
            String contentType = multipartFile.getContentType();

            InputStream stream = multipartFile.getInputStream();
            byte[] bytes = IOUtils.toByteArray(stream);

            HashMap<String, Object> map = new HashMap<String, Object>();
            map.put("fileoriginalsize", size);
            map.put("contenttype", contentType);
            map.put("base64", new String(Base64Utils.encode(bytes)));

            try {


                inputStream = file.getInputStream();

                   File newFile = new File("E:/Java_Project/EmployeeRegistrationForm/src/main/webapp/resources/image/"+ fileName);
                   if (!newFile.exists()) {
                    newFile.createNewFile();
                   }
                   outputStream = new FileOutputStream(newFile);
                   int read = 0;
                  // byte[] bytes = new byte[1024];

                   while ((read = inputStream.read(bytes)) != -1) {
                    outputStream.write(bytes, 0, read);
                   }
                  } catch (IOException e) {
                   // TODO Auto-generated catch block
                   e.printStackTrace();
                  }

            return map;
        }


}

但这显示错误：

EVERE：Servlet [dispatcher]的Servlet.service（）在路径[/ EmployeeRegistrationForm]的上下文中引发异常[请求处理失败;嵌套异常是org.springframework.web.bind.annotation.support.HandlerMethodInvocationException：无法调用处理程序方法[public java.util.HashMap EmployeeRegistrationForm.controller.imageUploadController.echoFile（org.springframework.web.multipart.MultipartHttpServletRequest，javax.servlet） .http.HttpServletResponse，EmployeeRegistrationForm.model.UploadedFile）抛出java.lang.Exception];嵌套异常是java.lang.IllegalStateException：当前请求的类型不是[org.springframework.web.multipart.MultipartHttpServletRequest]：org.apache.catalina.connector.RequestFacade@618dfe29]，根本原因java.lang.IllegalStateException：当前请求不属于[org.springframework.web.multipart.MultipartHttpServletRequest]类型：org.apache.catalina.connector.RequestFacade@618dfe29

这是我的dispatch-servlet：

<beans xmlns="http://www.springframework.org/schema/beans"
 xmlns:context="http://www.springframework.org/schema/context"
 xmlns:mvc="http://www.springframework.org/schema/mvc" 
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="
        http://www.springframework.org/schema/beans     
        http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
        http://www.springframework.org/schema/context 
        http://www.springframework.org/schema/context/spring-context-3.0.xsd
        http://www.springframework.org/schema/mvc
        http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd">

 <context:component-scan base-package="EmployeeRegistrationForm.controller" />
<mvc:resources mapping="/resources/**" location="/resources/" />
 <mvc:annotation-driven />
 <mvc:default-servlet-handler />
  <bean id="multipartResolver"
        class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="maxUploadSize" value="1048576"/>
    </bean>


</beans>

为什么它显示这个错误???当我输入文本数据时，它在控制器/员工中被称为ajax调用，它工作 . 但是当我尝试上传文件并通过单击相同jsp页面中的上传按钮调用ajax时在同一个控制器/ echofile中 - 它显示此错误 . 问题出在哪儿？

Here is full jsp page

1 回答

我在项目上改变了一些东西 . 在jquery上：

function uploadImage() {

            var file = $('[name="file"]');
            //var imgContainer = $('#imgContainer');

            var formData = new FormData();
            formData.append('file', jQuery('input[type=file]')[0].files[0]);
            var filename = $.trim(file.val());

            if (!(isJpg(filename) || isPng(filename))) {
                alert('Please browse a JPG/PNG file to upload ...');
                return;
            }

             $.ajax({
                url: "http://localhost:8080/EmployeeRegistrationForm/echofile",
                type: "POST",
                data: new FormData(document.getElementById("fileForm")), 
                //data: formData,
                enctype: 'multipart/form-data',
                processData: false,
                aync: false,
                modelAttribute:'uploadedFile',
                headers: {'Content-Type': 'multipart/form-data'},
                contentType: false,
             /*  }).done(function(data) {

                 var img = '<img src="data:' + data.contenttype + ';base64,'
                      + data.base64 + '"/>';
                  alert("success");

             }).fail(function(jqXHR, textStatus) {

                  alert('File upload failed ...');
              });  */

            success: function(response){

                var obj = JSON.parse(response);
                alert(response);

            },

            error: function(){                      
                alert('Error while request..');
            }
        });   
        }

我的控制器是：

@RequestMapping(value = "/echofile",method = RequestMethod.POST)
        public @ResponseBody HashMap<String, Object> echoFile(HttpServletRequest  request,
                HttpServletResponse response ,  @ModelAttribute("uploadedFile") UploadedFile upldfile) throws Exception {
         HashMap<String, Object> map = new HashMap<String, Object>();

         if(request instanceof MultipartHttpServletRequest){

             InputStream inputStream = null;
                OutputStream outputStream = null;
              // MultipartFile multipartFile = request.getFile("file");

                MultipartFile file = upldfile.getFile();
                String fileName = file.getOriginalFilename();
                System.out.println("vcvvvvvvvv"+fileName);
                upldfile.setFile(file);

                Long size = file.getSize();
                String contentType = file.getContentType();

                InputStream stream = file.getInputStream();
                byte[] bytes = IOUtils.toByteArray(stream);


                map.put("fileoriginalsize", size);
                map.put("contenttype", contentType);
                map.put("base64", new String(Base64Utils.encode(bytes)));

                try {


                    inputStream = file.getInputStream();

                       File newFile = new File("E:/Java_Project/EmployeeRegistrationForm/src/main/webapp/resources/image/"+ fileName);
                       if (!newFile.exists()) {
                        newFile.createNewFile();
                       }
                       outputStream = new FileOutputStream(newFile);
                       int read = 0;
                      byte[] byt = new byte[1024];

                       while ((read = inputStream.read(byt)) != -1) {
                        outputStream.write(byt, 0, read);
                       }
                      } catch (IOException e) {
                       // TODO Auto-generated catch block
                       e.printStackTrace();
                      }


         }
         return map; 


         }

This is my full jsp page

回复于 2024-05-01T08:19:37+08:00

如何通过单击控制器不同的同一个JSP页面的两个不同按钮来开发两个调用ajax？

1 回答

相关问题