悠然哈哈哈

导航

org.apache.commons.fileupload.FileUploadBase$InvalidContentTypeException:

用ajax提交form表单上传文件,出现以下错误

org.apache.commons.fileupload.FileUploadBase$InvalidContentTypeException: the request doesn't contain a multipart/form-data or multipart/mixed stream, content type header is application/x-www-form-urlencoded; charset=UTF-8
at org.apache.commons.fileupload.FileUploadBase$FileItemIteratorImpl.<init>(FileUploadBase.java:947)
at org.apache.commons.fileupload.FileUploadBase.getItemIterator(FileUploadBase.java:310)
at org.apache.commons.fileupload.FileUploadBase.parseRequest(FileUploadBase.java:334)
at org.apache.commons.fileupload.servlet.ServletFileUpload.parseRequest(ServletFileUpload.java:115)
at com.qiye.EnterpriseServlet.update(EnterpriseServlet.java:252)
at com.qiye.EnterpriseServlet.doPost(EnterpriseServlet.java:91)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:641)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:722)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:305)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:210)
at com.filter.MyFilter.doFilter(MyFilter.java:90)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:243)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:210)
at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:225)
at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:169)
at org.apache.catalina.authenticator.AuthenticatorBase.invoke(AuthenticatorBase.java:472)
at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:168)
at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:98)
at org.apache.catalina.valves.AccessLogValve.invoke(AccessLogValve.java:927)
at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:118)
at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:407)
at org.apache.coyote.http11.AbstractHttp11Processor.process(AbstractHttp11Processor.java:999)
at org.apache.coyote.AbstractProtocol$AbstractConnectionHandler.process(AbstractProtocol.java:565)
at org.apache.tomcat.util.net.JIoEndpoint$SocketProcessor.run(JIoEndpoint.java:309)
at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1145)
at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:615)
at java.lang.Thread.run(Thread.java:745)

 

通过 传统的 form 表单提交的方式上传文件:

<form id= "uploadForm" action= "http://localhost:8080/cfJAX_RS/rest/file/upload" method= "post" enctype ="multipart/form-data">
  <h1 >测试通过Rest接口上传文件 </h1>
  <p >指定文件名: <input type ="text" name="filename" /></p>
  <p >上传文件: <input type ="file" name="file" /></p>
  <p >关键字1: <input type ="text" name="keyword" /></p>
  <p >关键字2: <input type ="text" name="keyword" /></p>
  <p >关键字3: <input type ="text" name="keyword" /></p>
  <input type ="submit" value="上传"/>
</form>

不过 传统的 form 表单提交会导致页面刷新, 但是在有些情况下,我们不希望页面被刷新,这种时候我们都是使用Ajax的方式进行请求的:

$.ajax({
  url : "http://localhost:8080/STS/rest/user",
  type : "POST",
  data : $( '#postForm').serialize(),
  success : function(data) {
    $( '#serverResponse').html(data);
  },
  error : function(data) {
    $( '#serverResponse').html(data.status + " : " + data.statusText + " : " + data.responseText);
  }
});

如上,通过 $( '#postForm' ).serialize() 可以对form表单进行序列化,从而将form表单中的所有参数传递到服务端。

但是上述方式,只能传递一般的参数, 上传文件的文件流是无法被序列化并传递的。

不过如今主流浏览器都开始支持一个叫做FormData的对象,有了这个FormData,我们就可以轻松地使用Ajax方式进行文件 上传 了。

 

 

正确的方法是:

使用FormData,进行Ajax请求并上传文件

这里使用JQuery,但是老版本的JQuery比如1.2是不支持的,最好使用2.0或更新版本:
<form id= "uploadForm">
      <p >指定文件名: <input type="text" name="filename" value= ""/></p >
      <p >上传文件: <input type="file" name="file"/></ p>
      <input type="button" value="上传" onclick="doUpload()" />
</form>
function doUpload() {
  var formData = new FormData($( "#uploadForm" )[0]);
  $.ajax({
    url: 'http://localhost:8080/cfJAX_RS/rest/file/upload' ,
    type: 'POST',
    data: formData,
    async: false,
    cache: false,
    contentType: false,
    processData: false,
    success: function (returndata) {
        alert(returndata);
    },
    error: function (returndata) {
        alert(returndata);
    }
  });
}


一定要记得把form表单头里面除了id以为的数据去掉,不然会报错,为什么我也不知道



来自:http://www.tuicool.com/articles/IJrAna3

posted on 2015-06-19 15:02  悠然886  阅读(5790)  评论(1编辑  收藏  举报