form上传文件以及跨域异步上传

简介: 要设置了enctype属性才能上传,需要使用上传的jar包,这里使用的是cos-26Dec2008.jar,       关于跨域上传文件: 跨域上传文件总会报错,即使服务器端设置了header('Access-Control-Allow-Origin: *'),仍会报错说缺少multipart属性,发现用form提交就没问题。

要设置了enctype属性才能上传,需要使用上传的jar包,这里使用的是cos-26Dec2008.jar,

 

 

 

关于跨域上传文件:

跨域上传文件总会报错,即使服务器端设置了header('Access-Control-Allow-Origin: *'),仍会报错说缺少multipart属性,发现用form提交就没问题。原因是,

HTML5上传的时候就是用的CORS规范,即:在发送真正的上传请求之前会先发送一条OPTIONS请求给服务器,这时候需要服务器响应允许跨域上传的HTTP头,然后中断输出。浏览器接到允许跨域上传的HTTP头后会再次发起真正的上传文件请求(POST)。详细分析参考http://www.cnblogs.com/woshimrf/p/js-cors.html

因此,上传文件需要应答的,第一次options请求需要返回允许跨域的信息,而我通常第一次就当做文件接收了,所以接收不到。

做法:对请求进行拦截,如果是options请求直接返回

response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "POST, PUT, OPTIONS");

如果是别的请求则通过。

1 String method = request.getMethod();
2         if ("OPTIONS".equals(method)) {
3             return;
4         }
5         nextHandler.handle(target, request, response, isHandled);

 

 关于跨域的知识,参考http://www.cnblogs.com/woshimrf/p/js-cors.html

对于form提交跨域,而服务器不设置允许跨域的时候,看到有人用iframe模拟,全文:http://blog.csdn.net/lrz1011/article/details/7913992

 





唯有不断学习方能改变! -- Ryan Miao
目录
相关文章
|
2月前
|
前端开发
前端通过input标签封装Upload组件实现文件上传
前端通过input标签封装Upload组件实现文件上传
74 0
|
6月前
LayUI upload上传组件上传文件的两种方式
LayUI upload上传组件上传文件的两种方式
416 0
|
前端开发 JavaScript 应用服务中间件
multer实现文件上传功能全解(form上传、fetch请求上传、多文件上传)
multer实现文件上传功能全解(form上传、fetch请求上传、多文件上传)
multer实现文件上传功能全解(form上传、fetch请求上传、多文件上传)
|
6月前
|
JavaScript
原生js实现文件下载并设置请求头header
原生js实现文件下载并设置请求头header
|
存储 前端开发 Java
Element el-upload 文件上传/图片上传/拖拽上传/附带参数/附带请求头部详解
文目录 1. 前言 2. 基本用法 2.1 前端部分 2.2 后端部分 2.3 获取后端返回信息 3. 外观功能介绍 3.1 拖拽上传 3.2 显示图片 3.3 设置文件列表样式 3.4 显示提示信息 4. 事件功能介绍 4.1 限制上传文件数量 4.2 限制上传文件类型和大小 4.3 移除文件处理 4.4 手动上传 5. 附带参数 6. 附带请求头部 7. 小结
4144 0
如何通过form表单控制上传文件的大小?
如何通过form表单控制上传文件的大小?
1187 0
|
前端开发 JavaScript
el-upload上传文件和表单一起提交+后端接收代码
el-upload上传文件和表单一起提交+后端接收代码
434 3
el-upload上传文件和表单一起提交+后端接收代码
|
前端开发 Java 对象存储
使用el-upload进行服务端直传时出现错误
项目场景: 使用el-upload标签获取Java服务端签名直传
181 1
使用el-upload进行服务端直传时出现错误
|
测试技术 API
C#post请求上传图片文件中的总结
使用HttpWebRequest发起请求拼接url以及请求头请求体数据进行数据上传。
539 0
C#post请求上传图片文件中的总结
|
JavaScript
form表单中带有文件上传,同时提交
前台JS(easyUI) function EditsubmitForm() { var father = $('#select_category').
3351 0