HTML5 postMessage+iframe实现文件跨域异步上传

最新推荐文章于 2024-03-22 11:18:02 发布

jiangsyace

最新推荐文章于 2024-03-22 11:18:02 发布

阅读量2.7k

点赞数

分类专栏： java 文章标签： html5 异步上传

本文链接：https://blog.csdn.net/jiangsyace/article/details/43858443

版权

本文记录了利用HTML5的postMessage和iframe技术实现跨域图片上传的过程，包括文件上传的HTML结构、JavaScript代码实现图片预览及监听上传结果，以及后台采用的 COS 上传组件。提供了完整版下载链接供参考。

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

前段时间因为项目需求，要实现图片的跨域上传，研究了一番后实现了这个功能，这里做个记录方便日后遇到同样的问题，也给后来者做个参考。

目前为止我了解到的文件异步上传的方式有以下几种

flash控件（IOS已经不支持flash了）
HTML5 FormData
iframe形式

当然我们还可以通过使用一些第三方的插件来实现跨域上传比如jQuery的ajaxFileUpload，不过好像也是通过构建iframe来实现异步上传的。通过form的target属性将返回结果显示在一个隐藏的iframe来实现类似ajax的效果，而且form表单的提交是可以跨域的。

以下是文件上传的html：

<!DOCTYPE html>
<html>
<head>
    <title>Html5 postMessage+iframe跨域上传文件</title>
    <meta charset='UTF-8'>
    <link rel="stylesheet" href="style.css"/>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
</head>
<body>

    <form class="form w_12" action="" method="post" enctype="multipart/form-data"  target="uploadimg_