js无刷新上传文件

Posted 2020-08-16 MAHUAN

传统的文件上传方式

<form action="" method="POST" enctype="multipart/form-data">
<input type="file" name="file"/>
<input type="submit"/>
</form>

在执行上传后，页面会跳转到action指定的地址。

一般用户需要使用无页面刷新的上传方式上传文件，此时可采取iframe的方式，将form表单提交后的返回内容，重定向到iframe中。

修改后的代码为

<form action="" method="POST" target="target" enctype="multipart/form-data">
<input type="file" name="file"/>
<input type="submit"/>
</form>

<iframe name="target" id="target" frameborder="0" width="0" height="0"></iframe>

<script>
    var iframe = document.getElementById("target");
    var uploadCallback = function () {
        console.log(iframe.contentDocument.body.innerhtml);
    };
    iframe.onload = uploadCallback;
</script>

利用iframe的onload事件，检测是否传输完毕，并获取传输后的服务端返回值。

示例非常简单，会有浏览器不兼容的情况，但上传插件的基本思想如此。

 

此外还有swf方式的实现方式，可现实上传速度以及进度等信息。