ajax 分布式跨域怎么实现图片上传!急急。。。

程序员00 2011-10-28 05:59:00
加精
插件
--ajaxfileupload.js
jQuery.extend({
createUploadIframe: function(id, uri)
{
//create frame
var frameId = 'jUploadFrame' + id;
if(window.ActiveXObject) {
var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />');
if(typeof uri== 'boolean'){
io.src = 'javascript:false';
}
else if(typeof uri== 'string'){
io.src = uri;
}
}
else {
var io = document.createElement('iframe');
io.id = frameId;
io.name = frameId;
}
io.style.position = 'absolute';
io.style.top = '-1000px';
io.style.left = '-1000px';

document.body.appendChild(io);

return io
},
createUploadForm: function(id, fileElementId)
{
//create form
var formId = 'jUploadForm' + id;
var fileId = 'jUploadFile' + id;
var form = $('<form action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');
var oldElement = $('#' + fileElementId);
var newElement = $(oldElement).clone();
$(oldElement).attr('id', fileId);
$(oldElement).before(newElement);
$(oldElement).appendTo(form);
//set attributes
$(form).css('position', 'absolute');
$(form).css('top', '-1200px');
$(form).css('left', '-1200px');
$(form).appendTo('body');
return form;
},

ajaxFileUpload: function(s) {
// TODO introduce global settings, allowing the client to modify them for all requests, not only timeout
s = jQuery.extend({}, jQuery.ajaxSettings, s);
var id = new Date().getTime()
var form = jQuery.createUploadForm(id, s.fileElementId);
var io = jQuery.createUploadIframe(id, s.secureuri);
var frameId = 'jUploadFrame' + id;
var formId = 'jUploadForm' + id;
// Watch for a new set of requests
if ( s.global && ! jQuery.active++ )
{
jQuery.event.trigger( "ajaxStart" );
}
var requestDone = false;
// Create the request object
var xml = {}
if ( s.global )
jQuery.event.trigger("ajaxSend", [xml, s]);
// Wait for a response to come back
var uploadCallback = function(isTimeout)
{
var io = document.getElementById(frameId);
try
{
if(io.contentWindow)
{
xml.responseText = io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:null;
xml.responseXML = io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document;

}else if(io.contentDocument)
{
xml.responseText = io.contentDocument.document.body?io.contentDocument.document.body.innerHTML:null;
xml.responseXML = io.contentDocument.document.XMLDocument?io.contentDocument.document.XMLDocument:io.contentDocument.document;
}
}catch(e)
{
jQuery.handleError(s, xml, null, e);
}
if ( xml || isTimeout == "timeout")
{
requestDone = true;
var status;
try {
status = isTimeout != "timeout" ? "success" : "error";
// Make sure that the request was successful or notmodified
if ( status != "error" )
{
// process the data (runs the xml through httpData regardless of callback)
var data = jQuery.uploadHttpData( xml, s.dataType );
// If a local callback was specified, fire it and pass it the data
if ( s.success )
s.success( data, status );

// Fire the global callback
if( s.global )
jQuery.event.trigger( "ajaxSuccess", [xml, s] );
} else
jQuery.handleError(s, xml, status);
} catch(e)
{
status = "error";
jQuery.handleError(s, xml, status, e);
}

// The request was completed
if( s.global )
jQuery.event.trigger( "ajaxComplete", [xml, s] );

// Handle the global AJAX counter
if ( s.global && ! --jQuery.active )
jQuery.event.trigger( "ajaxStop" );

// Process result
if ( s.complete )
s.complete(xml, status);
jQuery(io).unbind()
setTimeout(function()
{try {$(io).remove();
$(form).remove(); } catch(e) { jQuery.handleError(s, xml, null, e);} }, 100)
xml = null
}
}
// Timeout checker
if ( s.timeout > 0 )
{
setTimeout(function(){
// Check to see if the request is still happening
if( !requestDone ) uploadCallback( "timeout" );
}, s.timeout);
}
try
{
// var io = $('#' + frameId);
var form = $('#' + formId);
$(form).attr('action', s.url);
$(form).attr('method', 'POST');
$(form).attr('target', frameId);
if(form.encoding)
{
form.encoding = 'multipart/form-data';
}
else
{
form.enctype = 'multipart/form-data';
}
$(form).submit();

} catch(e)
{
jQuery.handleError(s, xml, null, e);
}
if(window.attachEvent){
document.getElementById(frameId).attachEvent('onload', uploadCallback);
}
else{
document.getElementById(frameId).addEventListener('load', uploadCallback, false);
}
return {abort: function () {}};

},

uploadHttpData: function( r, type ) {
var data = !type;
data = type == "xml" || data ? r.responseXML : r.responseText;
// If the type is "script", eval it in global context
if ( type == "script" )
jQuery.globalEval( data );
// Get the JavaScript object, if JSON is used.
if ( type == "json" )
eval( "data = " + data );
// evaluate scripts within html
if ( type == "html" )
jQuery("<div>").html(data).evalScripts();
//alert($('param', data).each(function(){alert($(this).attr('value'));}));
return data;
}
})

---页面代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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="jquery.js"></script>
<script type="text/javascript" src="ajaxfileupload.js"></script>
<script type="text/javascript">
function ajaxFileUpload()
{

$("#loading")
.ajaxStart(function(){
$(this).show();
})//开始上传文件时显示一个图片
.ajaxComplete(function(){
$(this).hide();
});//文件上传完成将图片隐藏起来

$.ajaxFileUpload
(
{
url:'../gap/fileUpload.do',//用于文件上传的服务器端请求地址
secureuri:false,//一般设置为false
fileElementId:'file',//文件上传空间的id属性 <input type="file" id="file" name="file" />
dataType: 'json',//返回值类型 一般设置为json
success: function (data, status) //服务器成功响应处理函数
{
alert(data.message);//从服务器返回的json中取出message中的数据,其中message为在struts2中action中定义的成员变量

if(typeof(data.error) != 'undefined')
{
if(data.error != '')
{
alert(data.error);
}else
{
alert(data.message);
}
}
},
error: function (data, status, e)//服务器响应失败处理函数
{
alert(e);
}
}
)

return false;

}
</script>
</head>
<body>
<img src="loading.gif" id="loading" style="display: none;">
<input type="file" id="file" name="file" />
<br />
<input type="button" value="上传" onclick="return ajaxFileUpload();">
</body>
</html>



action 类方法!


@SuppressWarnings("deprecation")
public String fileUpload() throws Exception {

String path = ServletActionContext.getRequest().getRealPath("/upload1");

try {
File f = this.getFile();
if(this.getFileFileName().endsWith(".exe")){
message="对不起,你上传的文件格式不允许!!!";
return ERROR;
}
FileInputStream inputStream = new FileInputStream(f);
FileOutputStream outputStream = new FileOutputStream(path + "/"+ this.getFileFileName());
byte[] buf = new byte[1024];
int length = 0;
while ((length = inputStream.read(buf)) != -1) {
outputStream.write(buf, 0, length);
}
inputStream.close();
outputStream.flush();
} catch (Exception e) {
e.printStackTrace();
message = "对不起,文件上传失败了!!!!";

}
return SUCCESS;
}


}
...全文
7511 33 打赏 收藏 转发到动态 举报
写回复
用AI写文章
33 条回复
切换为时间正序
请发表友善的回复…
发表回复
Go 旅城通票 2013-11-28
  • 打赏
  • 举报
回复
引用 32 楼 caohonxian 的回复:
#31说的方法我试过,传文件也是有问题的 当A和B的二级域名一样时,B页面可以将文件上传成功,但捕获不到B服务器的response,报异常。 提示为B页面和B存在跨域问题。本来B页面和B服务器是同一个域,但因为B页面手动设置了document.domain=A服务器的耳机域名。所以也算跨域了。 如果B不设置document.domain呢? 这样B页面会上传文件到B服务器成功,而且也会获取到B的response,一切看来非常的顺利,但去B上查找时,无此文件,原因在B上传的过程中,无法拿到A页面的file input元素,因为A页面和B页面未指定相同的二级域名。 如果把file input标签放到B页面内部,那样不是既可以独到真正的元素标签又可以上传数据? 问题又出现了,那就是B页面内的file input选择弹出框被认为是一个不安全的东西,火狐有提示,谷歌直接无任何反应。 真想动态的做到B页面既可以先和A页面同域又可以和B服务器同域。可能我的方法也有问题吧 我是跨域上传文件到nginx,所有二级域名相同。
用#31的iframe来模拟跨域必须保证b域页面不会出错,要成功输出iframe加载a域的页面才行,看这个http://bbs.csdn.net/topics/390654338
honXian 2013-11-27
  • 打赏
  • 举报
回复
#31说的方法我试过,传文件也是有问题的 当A和B的二级域名一样时,B页面可以将文件上传成功,但捕获不到B服务器的response,报异常。 提示为B页面和B存在跨域问题。本来B页面和B服务器是同一个域,但因为B页面手动设置了document.domain=A服务器的耳机域名。所以也算跨域了。 如果B不设置document.domain呢? 这样B页面会上传文件到B服务器成功,而且也会获取到B的response,一切看来非常的顺利,但去B上查找时,无此文件,原因在B上传的过程中,无法拿到A页面的file input元素,因为A页面和B页面未指定相同的二级域名。 如果把file input标签放到B页面内部,那样不是既可以独到真正的元素标签又可以上传数据? 问题又出现了,那就是B页面内的file input选择弹出框被认为是一个不安全的东西,火狐有提示,谷歌直接无任何反应。 真想动态的做到B页面既可以先和A页面同域又可以和B服务器同域。可能我的方法也有问题吧 我是跨域上传文件到nginx,所有二级域名相同。
shengminghuoyuan 2011-12-14
  • 打赏
  • 举报
回复
webservice 你要保存图片的域中写webservice 使本地上传的图片保存到该域中 本地调用该webservice
  • 打赏
  • 举报
回复
A域页面->post B域页面 -> B域页面iframe一个A域页面,通过传参告知A域页面
msadmzz 2011-11-29
  • 打赏
  • 举报
回复
最好借助于第三方成熟控件来实现。比如QQ邮箱的附件上传功能就是上传到不同的服务器的。
另外一些网盘服务也是能够将文件上传到不同的服务器。
楼主可以试一下Xproer.HttpUploader
程序员00 2011-11-16
  • 打赏
  • 举报
回复
多回些关于跨域问题的解决方法。。。谢谢!!
alaxi282 2011-11-07
  • 打赏
  • 举报
回复
什么东东???
柏舟千里 2011-11-04
  • 打赏
  • 举报
回复
我也想知道具体怎样解决,学习中。。。
albb252 2011-11-03
  • 打赏
  • 举报
回复
推荐使用第三方Web文件上传控件或HTTP文件上传控件,AJAX存在一个跨域的问题。
wabcajs 2011-11-03
  • 打赏
  • 举报
回复
so long mark下慢慢研究
  • 打赏
  • 举报
回复
其实就是利用upload这个iframe里面的上传完成之后跳转到与当前服务器同域名的一个地址下,并且传递消息,上传iframe的域名就变成当前的域名了,就可以用top来操作框架外信息
  • 打赏
  • 举报
回复
index.php 放在domin1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<SCRIPT LANGUAGE="JavaScript">
<!--
var showmessage = function(message){
alert('indexmessage:'+message);
}
//-->
</SCRIPT>
</HEAD>

<BODY>
<form target="upload" action="http://domin2/upload.php" method="POST" enctype="multipart/form-data">
<input type="file" name="file" />
<input type="submit" value="submit" />
</form>
<iframe id="upload" name="upload" style="position:absolute;width:0;height:0;top:-1000px;left:-1000px;" ></iframe>

</BODY>
</HTML>

upload.php 放在domin2

<?php
define ( 'S_ROOT', dirname ( __FILE__ ) . DIRECTORY_SEPARATOR );
$upload_file=$_FILES['file']['tmp_name'];
$upload_file_name=$_FILES['file']['name'];
$message = 'success';
if($upload_file){
$store_dir = S_ROOT;// 上传文件的储存位置
//复制文件到指定目录
if (!move_uploaded_file($upload_file,$store_dir.$upload_file_name)) {
$message = "error";
exit;
}

}
header("Location: http://domin1/temp.php?message=".$message);
exit;
?>



temp.php 放在domin1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<SCRIPT LANGUAGE="JavaScript">
<!--
top.showmessage("<?php echo $_GET['message'];?>");
//-->
</SCRIPT>
</HEAD>

<BODY>
</BODY>
</HTML>


domin1是当前服务器 domin2是上传文件服务器
经测试完全可以
曾经看过一个部落格里面的具体文章没有记住。。
程序员00 2011-11-03
  • 打赏
  • 举报
回复
实际项目我是,改成服务器域名的。。。
快乐的2 2011-11-03
  • 打赏
  • 举报
回复
不同FRAME域之间的JS是不能互操作的.
xuelang1225 2011-11-02
  • 打赏
  • 举报
回复
帮顶.
  • 打赏
  • 举报
回复
跨域走什么客户端啊

你可以用B -> S (本域) -> S跨域 这类方案解决

s->s的方法很多 .net用webrequest

以前我们用跨域的方法很简单是动态加载script,不过你涉及图片上传就不能用这类方案了
Go 旅城通票 2011-11-02
  • 打赏
  • 举报
回复
楼主标题党吧。。看你url并没有跨域吧

url:'../gap/fileUpload.do',//用于文件上传的服务器端请求地址

url:'../gap/fileUpload.do',//用于文件上传的服务器端请求地址
secureuri:false,//一般设置为false
fileElementId:'file',//文件上传空间的id属性 <input type="file" id="file" name="file" />
dataType: 'json',//返回值类型 一般设置为json


看你代码指定返回数据为json,不太清楚java。
@SuppressWarnings("deprecation")
public String fileUpload() throws Exception {

String path = ServletActionContext.getRequest().getRealPath("/upload1");

try {
File f = this.getFile();
if(this.getFileFileName().endsWith(".exe")){
message="对不起,你上传的文件格式不允许!!!";
return ERROR;
}
FileInputStream inputStream = new FileInputStream(f);
FileOutputStream outputStream = new FileOutputStream(path + "/"+ this.getFileFileName());
byte[] buf = new byte[1024];
int length = 0;
while ((length = inputStream.read(buf)) != -1) {
outputStream.write(buf, 0, length);
}
inputStream.close();
outputStream.flush();
} catch (Exception e) {
e.printStackTrace();
message = "对不起,文件上传失败了!!!!";

}
return SUCCESS;
}


}

不过看你的代码使用return语句,客户端得到的返回应该不会是json的。。jq不同你的dwr之类的框架,可以使用return数据,然后包装什么的在客户端生成对应的json对象

你应该使用输出对象输出json格式的字符串,并且json格式还不能是怪异模式的(jq1.4+)。。
参考
jquery json
flybisu 2011-11-02
  • 打赏
  • 举报
回复
ajax跨域问题本来就很麻烦
poly3 2011-11-02
  • 打赏
  • 举报
回复
有没有现成的控件?
文件上传的问题我也想知道
YHL27 2011-11-02
  • 打赏
  • 举报
回复
我也想知道这个问题怎么解决
加载更多回复(12)

52,797

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 Ajax
社区管理员
  • Ajax
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧