现今的网站上各处都有用到文件上传功能，传统的文件上传就是post发送数据到一个新页面接受并处理，这样子会刷新页面而且用户体验不好，更多情况下我们可能更希望页面不用刷新页面就可以上传文件，上传成功后给对应的提示或者再继续执行相应的操作。

现在网上也有很多类似的无刷新上传插件，而这大部分插件都是基于一个隐藏的iframe做的。

实现原理：

1、在页面插入一个隐藏的iframe，其name为framename。

2、监听上传文件域的change事件，当事件触发时动态的创建一个form，并将当前文件上传域插入到form中，然后在我们之前创建的iframe中提交form（就是将form的target属性设置为隐藏iframe的那么也就是framename）

原声js代码实现：

var uploadFile = (function(){
return function(fileid,url){
var file_field = document.getElementById(fileid);
file_field.addEventListener("change",function(){
var upload_form = createForm({action:url,target:"hidden_frame"});
createHiddenFrame();
upload_form.appendChild(file_field.cloneNode());
upload_form.submit();
},false)
}
function createForm(param){
var form = document.createElement("form");
form.method = "post";
form.action = param.action;
form.enctype = "multipart/form-data";
form.target = param.target;
form.style.display = "none";
document.body.appendChild(form);
return form;
}
function createHiddenFrame(){
var frame = document.createElement("iframe");
frame.name = "hidden_frame";
frame.style.cssText = "display:none;";
document.body.appendChild(frame);
}
}());
new uploadFile("文件上传域id","提交地址");

Jquery代码实现：

<iframe name="hidden_frame"></iframe>
$("#myFile").change(function(){
var form = createForm({action:"upload.php",target:"hidden_frame"});
form.append(this);
form.submit();
})
});
function createForm(settings){
return $("<form />")
.attr({
method: "post",
action: settings.action,
enctype: "multipart/form-data",
target: settings.target
})
.hide()
.appendTo("body");
}