跨服务器上传文件方法

如果仅是跨域请求数据,可以使用web三种跨域请求数据方法,但如果是上传文件,jsonp就不能使用,需要使用下边的方法。

1,同主域名,不同子域名,跨服务器上传文件,这种情况可以设置页面的document.domain,让它可以直接允许上传,个人建议同一主域名的,都用这种方法来处理,再方便。

upload1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
</head>
<body>
<form id="form1" name="form1" action="http://a.myxxxx.com:8081/test/a/b1/upload1.php" method="post"  enctype="multipart/form-data" >
<input type="file" name="file" />
<input type="submit" value="上传" />
<input id="subbtn" type="button" value="确定"/>
</form>

<script type="text/javascript">
// 本地测试,需要设置域名,修改 C:\Windows\System32\drivers\etc\hosts
//	127.0.0.1       www.myxxxx.com
//	127.0.0.1       a.myxxxx.com
document.domain = 'myxxxx.com';
$("#form1").ajaxForm({
	iframe: true,
	dataType:  'json',
	success: function(obj) 
	{
		console.log("==================");
		console.log(obj);
	},
	error:function(value)
	{
		alert("服务器忙,请稍后");
	}
});

$("#subbtn").click(function(){
	$('#form1').submit();
});

</script>
</html>

upload1.php

<?php
$filename = isset($_FILES["file"]["name"]) == true ? $_FILES["file"]["name"] : '';
// 保存文件处理省略
$json = array('fileName'=>$filename);
$html = '<html>';
$html .= '<head>';
$html .= '<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">';
$html .= '<title>Insert title here</title>';
$html .= '<script type="text/javascript">document.domain = "myxxxx.com";</script>';
$html .= '</head>';
$html .= '<body>';
$html .= json_encode($json);
$html .= '</body>';
echo $html;
?>
2,不同域名的跨服务器上传方法(该方法同样支持1的情况),该方法主要是在处理页面里面,再跳转回原域名的页面来实现跨域提交。

upload2.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
</head>
<body>
<form id="form1" name="form1" action="http://a.myxxxx.com:8081/test/a/b1/upload2.php" method="post"  enctype="multipart/form-data" >
<input type="file" name="file" />
<input type="submit" value="上传" />
<input id="subbtn" type="button" value="确定"/>
</form>

<script type="text/javascript">
$("#form1").ajaxForm({
	iframe: true,
	dataType:  'json',
	success: function(obj) 
	{
		console.log("==================");
		console.log(obj);
	},
	error:function(value)
	{
		alert("服务器忙,请稍后");
	}
});

$("#subbtn").click(function(){
	$('#form1').submit();
});

</script>
</html>


upload2.php

<?php
$filename = isset($_FILES["file"]["name"]) == true ? $_FILES["file"]["name"] : '';
// 保存文件处理省略
$json = array('fileName'=>$filename);
header("location:http://www.myxxxx.com:8081/test/a/b1/callback.php?data=".json_encode($json));
?>

callback.php

<?php
$data = $_GET['data'];
echo $data;
?>

3,为使用jquery.form插件,原始的上传文件方法处理。
upload3.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<form target="bridgeframe" id="form1" name="form1" action="http://a.myxxxx.com:8081/test/a/b1/upload3.php" method="post"  enctype="multipart/form-data" >
<input type="file" name="file" />
<input type="submit" value="上传" />
</form>
<iframe id="bridgeframe" name="bridgeframe" src="about:blank" frameborder='0' style="display:none"></iframe>
<script type="text/javascript">
function callUpData(obj)
{
	console.log("==================");
	console.log(obj);
}
</script>
</html>
upload3.php


<?php
$filename = isset($_FILES["file"]["name"]) == true ? $_FILES["file"]["name"] : '';
// 保存文件处理省略
$json = array('fileName'=>$filename);
header("location:http://www.myxxxx.com:8081/test/a/b1/callback3.php?data=".json_encode($json));
?>
callback3.php


<script type="text/javascript">
        window.parent.callUpData(<?php echo $_GET['data'];?>);
</script>









你可能感兴趣的:(跨服务器上传文件方法)