原创ajax文件无刷新上传
function submitFun() {
var files = [document.getElementById('sc')];
ajaxUploadFile({url:'Index.aspx','files':files,success:function(){alert('success');}});
}
//{url, files, data,success,error}
function ajaxUploadFile(ajaxOptions) {
var iframeName = 'tmp_iframe';
var newform, iframe;
var body = document.body;
//服务器的返回值
var xml = {};
var url = ajaxOptions.url;
var files = ajaxOptions.files;
var data = ajaxOptions.data;
var success = ajaxOptions.success;
var error = ajaxOptions.error;
//一个对象数组,对象有两个属性,一个表示临时input文件上传框,一个表示原始文件上传框
var fileArr = [];
//提交完成或者超时后的回调函数
var uploadedCallback = function(timeout) {
try {
//如果不是因为超时才调用此回调函数
if ('timeout' != timeout) {
if (iframe.contentWindow) {
xml.responseText = iframe.contentWindow.document.body ? iframe.contentWindow.document.body.innerHTML : null;
xml.responseXML = iframe.contentWindow.document.XMLDocument ? iframe.contentWindow.document.XMLDocument : io.contentWindow.document;
} else if (iframe.contentDocument) {
xml.responseText = io.contentDocument.document.body ? iframe.contentDocument.document.body.innerHTML : null;
xml.responseXML = io.contentDocument.document.XMLDocument ? iframe.contentDocument.document.XMLDocument : io.contentDocument.document;
}
success(xml.responseText, xml.responseXML);
} else {
}
} catch (e) {
if(error)
{
error(e);
}
}
div.parentNode.removeChild(div);
//newform.parentNode.removeChild(newform);
//iframe.parentNode.removeChild(iframe);
}
/*
//创建一个新的form,用于暂时保存上传文件框,hidden控件等
var newform = document.createElement('form');
newform.action = url;
newform.enctype = 'multipart/form-data';
newform.method = 'post';
newform.target = iframeName;
newform.style.display = 'none';
newform.id = "newform";
newform.name = 'newfrom';
//创建一个IFrame,用于做新的form的提交后显示服务器返回内容的窗口
var iframe = document.createElement('iframe');
iframe.name = iframeName;
//将newform和iframe添加到body
body.appendChild(iframe);
body.appendChild(newform);
*/
var str = '<form action="' + url + '" enctype="multipart/form-data" method="post" target="' + iframeName + '"></form><iframe name="' + iframeName + '"></iframe>';
var div = document.createElement('div');
div.innerHTML = str;
div.style.display = "none";
newform = div.getElementsByTagName('form')[0];
iframe = div.getElementsByTagName('iframe')[0];
body.appendChild(div);
iframe.onload = uploadedCallback;
if (iframe.attachEvent) {
iframe.attachEvent('onload', uploadedCallback);
}
for (var i = 0; i < files.length; i++) {
var newfile = files[i].cloneNode(true);
fileArr.push({ tmpfile: newfile, orifile: files[i] });
files[i].parentNode.insertBefore(newfile, files[i]);
newform.appendChild(files[i]);
}
//根据一些自定义的数据,创建input[type=file],添加到新的form
if (data) {
for (var attr in data) {
var hidden = document.createElement('input');
hidden.type = 'hidden';
hidden.name = attr;
hidden.value = data[attr];
newform.appendChild(hidden);
}
}
if (ajaxOptions.timeout) {
setTimeout(function() { uploadedCallback('timeout'); }, ajaxOptions.timeout);
}
//提交form
newform.submit();
//恢复原始文件上传框
for (i = 0; i < fileArr.length; i++) {
fileArr[i].tmpfile.parentNode.insertBefore(fileArr[i].orifile, fileArr[i].tmpfile);
fileArr[i].tmpfile.parentNode.removeChild(fileArr[i].tmpfile, true);
}
//newform.parentNode.removeChild(newform);
//iframe.parentNode.removeChild(iframe);
}
var files = [document.getElementById('sc')];
ajaxUploadFile({url:'Index.aspx','files':files,success:function(){alert('success');}});
}
//{url, files, data,success,error}
function ajaxUploadFile(ajaxOptions) {
var iframeName = 'tmp_iframe';
var newform, iframe;
var body = document.body;
//服务器的返回值
var xml = {};
var url = ajaxOptions.url;
var files = ajaxOptions.files;
var data = ajaxOptions.data;
var success = ajaxOptions.success;
var error = ajaxOptions.error;
//一个对象数组,对象有两个属性,一个表示临时input文件上传框,一个表示原始文件上传框
var fileArr = [];
//提交完成或者超时后的回调函数
var uploadedCallback = function(timeout) {
try {
//如果不是因为超时才调用此回调函数
if ('timeout' != timeout) {
if (iframe.contentWindow) {
xml.responseText = iframe.contentWindow.document.body ? iframe.contentWindow.document.body.innerHTML : null;
xml.responseXML = iframe.contentWindow.document.XMLDocument ? iframe.contentWindow.document.XMLDocument : io.contentWindow.document;
} else if (iframe.contentDocument) {
xml.responseText = io.contentDocument.document.body ? iframe.contentDocument.document.body.innerHTML : null;
xml.responseXML = io.contentDocument.document.XMLDocument ? iframe.contentDocument.document.XMLDocument : io.contentDocument.document;
}
success(xml.responseText, xml.responseXML);
} else {
}
} catch (e) {
if(error)
{
error(e);
}
}
div.parentNode.removeChild(div);
//newform.parentNode.removeChild(newform);
//iframe.parentNode.removeChild(iframe);
}
/*
//创建一个新的form,用于暂时保存上传文件框,hidden控件等
var newform = document.createElement('form');
newform.action = url;
newform.enctype = 'multipart/form-data';
newform.method = 'post';
newform.target = iframeName;
newform.style.display = 'none';
newform.id = "newform";
newform.name = 'newfrom';
//创建一个IFrame,用于做新的form的提交后显示服务器返回内容的窗口
var iframe = document.createElement('iframe');
iframe.name = iframeName;
//将newform和iframe添加到body
body.appendChild(iframe);
body.appendChild(newform);
*/
var str = '<form action="' + url + '" enctype="multipart/form-data" method="post" target="' + iframeName + '"></form><iframe name="' + iframeName + '"></iframe>';
var div = document.createElement('div');
div.innerHTML = str;
div.style.display = "none";
newform = div.getElementsByTagName('form')[0];
iframe = div.getElementsByTagName('iframe')[0];
body.appendChild(div);
iframe.onload = uploadedCallback;
if (iframe.attachEvent) {
iframe.attachEvent('onload', uploadedCallback);
}
for (var i = 0; i < files.length; i++) {
var newfile = files[i].cloneNode(true);
fileArr.push({ tmpfile: newfile, orifile: files[i] });
files[i].parentNode.insertBefore(newfile, files[i]);
newform.appendChild(files[i]);
}
//根据一些自定义的数据,创建input[type=file],添加到新的form
if (data) {
for (var attr in data) {
var hidden = document.createElement('input');
hidden.type = 'hidden';
hidden.name = attr;
hidden.value = data[attr];
newform.appendChild(hidden);
}
}
if (ajaxOptions.timeout) {
setTimeout(function() { uploadedCallback('timeout'); }, ajaxOptions.timeout);
}
//提交form
newform.submit();
//恢复原始文件上传框
for (i = 0; i < fileArr.length; i++) {
fileArr[i].tmpfile.parentNode.insertBefore(fileArr[i].orifile, fileArr[i].tmpfile);
fileArr[i].tmpfile.parentNode.removeChild(fileArr[i].tmpfile, true);
}
//newform.parentNode.removeChild(newform);
//iframe.parentNode.removeChild(iframe);
}