<form id="upload_img" method="post" enctype="multipart/form-data" target="upload">
<div style="position:relative;float:left;">
<input accept="image/gif,image/jpeg,image/x-png" style="opacity:0;width: 258px;height: 28px;" type="file" name="file" onchange="upload_img_by_handle_file_name(this);">
<div style="height: 28px;margin-top: -28px;">
<input type="text" class="input-fat" placeholder="请上传图片" style="width:170px;">
<a href="javascript:void(0);" class="sui-btn btn-large">浏览..</a>
<input type="hidden" name="seller_nick">
<input type="hidden" name="return_url">
</div>
</div>
</form>
<iframe name="upload" style="display:none;"></iframe>
function upload_img_by_handle_file_name(element) {
$(element).next().find(":text").val($(element).val().substring($(element).val().lastIndexOf("\\") + 1));
}
当from提交至后端 响应有iframe接收 (target=”upload”)
后端处理后将接收的return_url参数拼成 (return_url+”?status=success”) 跳转到return_url拼成后的地址
这是 iframe 接收的后端处理后的return_url地址和参数状态(这里涉及到跨域的问题,所以需要前端传回一个url确保在同域下)
function GetRequest(url) {
//var url = location.search; //获取url中"?"符后的字串
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strs = str.split("&");
for (var i = 0; i < strs.length; i++) {
theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
}
}
return theRequest;
}
var ts = setInterval(function () {
try {
var search = window.upload.location.search;
var request = new Object();
if (search != "") {
clearInterval(ts);
if (search.indexOf("status=success") > 0) {
var par = new Object();
par = GetRequest(window.upload.location.search);
console.log(par);
window.upload.location.search = "";
}
else {
console.log("上传失败");
window.upload.location.search = "";
}
}
} catch (e) {
console.log(e);
clearInterval(ts);
window.upload.location.search = "";
console.log("上传失败");
}
}, 500);
这里利用定时器取iframe的location根据取得的search就可知道返回的状态