PHP、Js不用flash解决跨域上传问题

这个是我在工作中遇到的问题。现在记录之。同时也把我的想法分享给大家。我把一系列的代码弄成了一个js文件,前端只需要调用就可以。源码开放。不过最终还是用的iframe解决的,没有在IE系列上测试过,不过应该不会有问题。缺点是返回的信息通过URL传输限制了可以携带的数据量。如果有什么好的解决方案的话,可以跟贴讨论。
两台服务器分别是:www.site2.com(后台系统) 和www.site4.com (IMG或者文件服务器)。

思路:
1.加载正常的html代码。
2.Onclick 动态创建<iframe> 标签和<input type=file> 表单。
3.选择完文件后自动submit 到后台,后台返回数据填充iframe。
4.获取iframe内容至正常表单。
5.提交获得到已经上传的文件url表单至后台。
代码:
HTML:

<html>
<head>
<title>跨域上传</title>
<meta charset="utf-8" />
<script src="jquery.min.js"></script>
<script src="xlyjs.js"></script>
</head>
<body>
<a href="javascript:void(0)" onclick="upload()">上传图片</a><br /><br />
<img class="re" src="" width="150px" height="100px"/>
<script>
function upload(){
var upload = "http://www.site2.com/jq_upload/upload_bak.php";//远程上传接口
var callbackurl = "http://www.site4.com/upload_callback_func.php";//回调url
$.app.method.upload(upload,callbackurl,function(data){
if(data.msg && (typeof(data.msg) == 'string' || typeof(data.msg.url) == 'string')){
var url = (typeof(data.msg) == 'string') ? data.msg : data.msg.url;
console.log(url);
$(".re").attr('src',data.msg.url);
}else{
var tip = data.err ? data.err : '上传失败';
$.app.method.tip('提示信息', tip, 'error');
}
},function(filename){
if(!filename.match(/\.jpg$|\.jpeg$|\.png$|\.gif$|\.bmp$/i)){
$.app.method.tip('上传文件后缀不允许');
return false;
}
return true;
});}
</script>
</body>
</html>

JS:

(function($){
$.extend({ app: { method: {}, module: {} } });
/* 消息提示 */
$.extend($.app.method, { tip:
function (msg) {
alert(msg);
}
});
/* 点击上传 */
$.extend($.app.method, {'uploadOption': {}}, { upload:
function(action, callbackurl,callback, check){
var option = {
action : action,
id : 'app-upload-when-click-div-' + new Date().getTime(),
onload : false,
dialog : null,
callback : callback,
check : check,
method : {
callback: function(that){
if(!$.app.method.uploadOption.onload) return false;
var text = that.contentWindow.document.body.innerHTML;
$('#' + $.app.method.uploadOption.id).remove();
try{
var obj = $.parseJSON(text);
}catch(e){}
if(!obj){
$.app.method.tip('数据返回格式有误');
return false;
}
//上次成功后执行回调函数
if(typeof $.app.method.uploadOption.callback == 'function') return $.app.method.uploadOption.callback(obj);
},
submit: function(that){
var check = true;
//验证上传文件函数
if(typeof $.app.method.uploadOption.check == 'function'){
if(!$.app.method.uploadOption.check($('#' + $.app.method.uploadOption.id).find('form input[type="file"]:first').val())){
check = false;
}
}
//验证通过后直接上传
if(check){
$.app.method.uploadOption.onload = true;
try{
$(that).parent('form:first').trigger('submit');
}catch(e){
$('#' + $.app.method.uploadOption.id).remove();
$.app.method.tip(e.message);
}
}
}
}
};

if(typeof option.action != 'string'){
$.app.method.tip('未设置上传地址!');
return false;
}
$.app.method.uploadOption = option;

var html = [];
html.push('<div id="' + $.app.method.uploadOption.id + '" style="display:block;margin:0;padding:0;width:0;height:0;overflow:hidden;">');
html.push('<iframe onload="$.app.method.uploadOption.method.callback(this)" name="app-upload-when-click-form-submit-target-iframe" style="display:none"></iframe>');
html.push('<form style="padding:15px 10px;text-align:center" method="post" action="' + $.app.method.uploadOption.action + '" enctype="multipart/form-data" target="app-upload-when-click-form-submit-target-iframe">');
html.push('<input type="file" name="upload" onchange="$.app.method.uploadOption.method.submit(this)" />');
html.push('<input type="hidden" name="callbackfunc" value="'+callbackurl+'" />');
html.push('</form>');
html.push('</div>');
$(html.join('')).appendTo('body');
//IE由于安全限制不允许直接用js选择文件并上传
if ((navigator.userAgent.indexOf('MSIE') >= 0) && (navigator.userAgent.indexOf('Opera') < 0)){
$.app.method.uploadOption.dialog = $('#' + $.app.method.uploadOption.id).dialog({title: '请选择文件',iconCls: 'icons-application-application_form_add',width: 280,modal: true});
}else{
$('#' + $.app.method.uploadOption.id).find('input[type="file"][name="upload"]:first').trigger('click');
}
return false;
}
});
})(jQuery);

源码下载!

打赏此文

如果您觉得本站的内容对您有所帮助,您可以扫描下面的二维码小额支付请我喝杯茶,感谢!打赏记录
支付宝
微信
承诺:凡打赏捐助的朋友,留言备注自己的邮箱,在打赏捐助时间点的6个月内,本站会每周邮件推送原创专业技术博文,供大家学习和参考!

留下评论

All fields marked (*) are required