JQ+Tomcat实现文件上传到跨域服务器(无后台代码)
快速搭建一个用于图片上传功能的服务器,有点安全问题,只适合自己玩一玩.
1.配置Tomcat为可写状态
conf/web.xml下,在该位置添加如下代码
<!--设置可写状态-->
<init-param>
<param-name>readonly</param-name>
<param-value>false</param-value>
</init-param>
2.Tomcat添加一个过滤器用来提供跨域支持,浏览器在进行跨域请求时,会发送一个options请求到服务器,服务器返回允许的操作后,浏览器会再次发真正的请求
<!--支持跨域请求-->
<filter>
<filter-name>CorsFilter</filter-name>
<filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
<init-param>
<param-name>cors.allowed.origins</param-name>
<param-value>*</param-value>
</init-param>
<init-param>
<param-name>cors.allowed.methods</param-name>
<param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
</init-param>
<init-param>
<param-name>cors.allowed.headers</param-name>
<param-value>*</param-value>
</init-param>
<init-param>
<param-name>cors.exposed.headers</param-name>
<param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value>
</init-param>
<init-param>
<param-name>cors.support.credentials</param-name>
<param-value>true</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>CorsFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
Host标签中创建一个虚拟路径用于存放上传的文件
<Context docBase="E:\imgs" path="/imgs" />
html代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="author" content="howroad">
<title>TEST</title>
</head>
<body>
<input type="file" id="myfile"/>
<button id="sub">submit</button>
<script src="http://www.jq22.com/jquery/jquery-2.1.1.js"></script>
<script>
$("#sub").click(function(){
//设置一个根据时间戳的文件名
var name = $("#myfile").val();
var point = name.lastIndexOf(".");
var type = name.substr(point);
name = new Date().getTime()+type;
//上传
$.ajax({
url:"http://localhost:8080/imgs/"+name,
type:"PUT",
data:$("#myfile").get(0).files[0],
processData:false
});
});
</script>
</body>
</html>
帮到您的话请点个赞吧~~~