最近在看kindeditor这个插件,因为它一般是前后端一套的,支持多种后端语言的,可以在后端代码中去请求七牛服务器再返回,这样没有跨域问题。但是对于纯前端来说想用就比较麻烦了,因为如果直接发请求到七牛服务器,我们就跨域了。上篇文章刚解决单个文件上传的跨域问题,现在发现多文件上传和单文件上传竟然不一样!单文件上传是通过iframe+form实现跨域,而多文件上传是通过flash实现的。

解决思路

kindeditor上传多文件用的是swfupload.js这个插件,这个插件比较古老了,用的是flash解决文件上传,虽然比较古老,但对应的兼容性更好。用这个玩意上传,需要在对方服务器上有一个叫做crossdomain.xml的文件,这个文件定义接受哪些域的flash请求。比如,我们本地localhost服务器向七牛服务器(up.qiniu.com)发送一个flash请求,如果up.qiniu.com上没有crossdomain.xml文件,或者文件里没有允许localhost,那么这个请求就会失败。因此,我们首先要向七牛上上传一个crossdomain.xml,文件如下:

上面是最简单的配置,表示up.qiniu.com接受所有域的flash请求。配置完之后,我们来看一个swfupload.js上传的demo:

(注意,打开demo后正确如下图,如果你打开后看不到‘点我选择文件’,可能是你的网页不允许开启flash,你要先开启flash。)

点击上传后,我们注意请求的接口:

我们可以看到这里首先向up.qiniu.com发送了一个up.qiniu.com/crossdomain.xml,表示先去up.qiniu.com根目录下看看有没有crossdomain.xml,因为这里我们放了并且接受所有域,所以可以下一步上传操作。

好,现在回过头来看看我们的kindeditor中多文件上传现在是个啥情况,我们请求一下会发现以下问题:

我们会发现用kindeditor无法请求到up.qiniu.com下的crossdomain.xml,为什么呢?因为kindeditor在up.qiniu.com后面加上了一个?dir=image,这样导致请求crossdomain失败,因此我们要将kindeditor上的?dir=image去掉。

去掉了之后现在可以请求成功了,但是图片仍然无法出现,因为七牛返回的是是{url:'...'}:

但是kindeditor还需要一个error,因此你可以在七牛返回的时候加上一个error,或者在kindeditor的代码上去掉判断error的代码:

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字