文件ajax上传

    一般来说，ajax不能发送文件（新规范中有了支持，但低版本浏览器中肯定不行），所以文件ajax上传的原理一般不用ajax实现，用表单提交。

    一般的表单提交会刷新页面，所谓的ajax上传就无从谈起，所以先说说无刷新的表单提交

   

<form target="frm" action="xxx.htm">
<button type="submit">提交</button>
</form>
<iframe id='frm' name='frm'></iframe>

    提交如上表单，服务端返回的内容将渲染到上面的iframe，主页面将不刷新。

    基于该机制，就可以实现无刷新文件上传

   

<form target="frm" action="Default.aspx?type=upFile" method="post" enctype="multipart/form-data">
<input type='file' name="UploadFile" /> 
<button type="submit">提交</button>
</form>
<iframe id='frm' name='frm'></iframe>

如上表单，点击上传，即可成功上传文件而不刷新页面

当然作为一个类ajax接口，仅仅无刷新还不够，我们还需要实现回调函数，并获得服务端返回值

这需js实现,为简化代码，使用jQuery代码
<script>
    function callback(res){
        alert(res);
    }
    var frm = $("#frm");
    frm.load(function(){
        var wnd = this.contentWindow;
        var str = $(wnd.document.body).html();
        callback(str);
    });
    
</script>

就这样，上传完成后就会执行callback函数，并传递服务端返回值。
按照该原理，可以轻松包装出一个ajax文件上传组件。