【前端】利用ajax实现伪文件异步上传下载

最新推荐文章于 2024-08-07 08:51:14 发布

smok56888

最新推荐文章于 2024-08-07 08:51:14 发布

阅读量4.9k

点赞数

分类专栏：前端文章标签：前端 ajax iframe

本文链接：https://blog.csdn.net/smok56888/article/details/50036179

版权

本文介绍了如何利用ajax和iframe模拟文件的异步上传和下载，解决ajax不支持二进制文件传输的问题。通过设置form的target属性，结合iframe和回调函数，实现了伪ajax的文件上传，并详细说明了服务器端的响应处理。对于文件下载，同样利用类似逻辑，通过调整返回数据的ContentType，实现在出现错误时提供反馈信息。

摘要由CSDN通过智能技术生成

利用ajax可以实现很酷的效果，在不刷新页面的情况下提交表单、修改数据状态等等，可是如果表单里还有input:file可就惨了，ajax不支持文件的处理啊！

ajax是使用了浏览器内部的XmlHttpRequest对象来传输XML数据的。既然是Xml的数据传输，那么传输的数据肯定是文本的，而文件上传则需要传输二进制的数据，显然用ajax是不可能的。

可是ajax这么好用，大家也都习惯了这种开发和使用体验，试想如果form表单包含文件上传，那提交表单要刷新整个页面，提交成功还好，提交失败了表单数据可都没有了，这颗真难受。有没有什么办法能实现类似的逻辑呢？

请注意以下属性：form:target、iframe、parrent.callback() ，我们利用这些小属性，来完成伪·ajax上传下载文件吧。

<!-- 这是数据表单 -->
<form action="/upload" id="form1" method="post"  enctype="multipart/form-data" target="hidden_frame">
	<input type="file" name="uploadfile" accept="*" />
	<input type="submit" value=