使用jquery的uploadify插件跨域上传文件

时间：2022-01-24 04:12:33

最近在项目开发中，需要将不同的项目底下的图片传到一个共同的文件服务器上，而这些项目是部署在不同的机器上的，这就涉及到文件跨域上传的问题。由于在之前的项目中，都是使用jquery的uploadify插件来上传图片，依照这个思路，通过查找，发现uploadify就可以实现跨域上传功能，具体如下：

(1)将JSP页面原先使用的本地上传调用修改远程调用，相当于是调用远程文件服务器上的jsp来完成文件上传：

$("#uploadify").uploadify({
'uploader'       : 'js/uploadify.swf',
'script'         : '<%=basePath%>pic/plugin.jsp?parms='+sessionid+',1',
'cancelImg'      : 'js/cancel.png',
'buttonImg' : 'js/sc_icon.png',
'folder'         : '/photos',
'queueID'        : 'fileQueue',
'auto'           : true,
'multi'          : false,
'wmode' : 'transparent',
'simUploadLimit' : 1,
'fileExt' : '*.png;*.gif;*.jpg;*.bmp;*.jpeg',
'fileDesc' : '图片(*.png;*.gif;*.jpg;*.bmp;*.jpeg)',
'onSelectOnce' : function(event,data,data)

具体就是将basePath修改为可配置的一个地址，下面的appPath取自配置文件中的地址，这样就可以动态配置，方便部署： 

$("#uploadify").uploadify({
'uploader'       : 'js/uploadify.swf',
'script'         : '<%=appPath%>pic/plugin.jsp?parms='+sessionid+',1',
'cancelImg'      : 'js/cancel.png',
'buttonImg' : 'js/sc_icon.png',
'folder'         : '/photos',
'queueID'        : 'fileQueue',
'auto'           : true,
'multi'          : false,
'wmode' : 'transparent',
'simUploadLimit' : 1,
'fileExt' : '*.png;*.gif;*.jpg;*.bmp;*.jpeg',
'fileDesc' : '图片(*.png;*.gif;*.jpg;*.bmp;*.jpeg)',

(2)在远程文件服务器上的tomcat中，添加crossdomain.xml，内容如下： 

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
<site-control permitted-cross-domain-policies="all" />
<allow-access-from domain="*" />
<allow-http-request-headers-from domain="*" headers="*" />
</cross-domain-policy>

此文件置于tomcat的webapp的ROOT目录底下：

使用jquery的uploadify插件跨域上传文件


在浏览器中如果能访问到此XML文件，说明XML配置成功。

使用jquery的uploadify插件跨域上传文件

这个adobe的一个协议，因为uploadify是利用adobe的swf上传的，这个协议可以解决跨域的安全问题，这样就能通过uploadify插件实现上传了，具体可以根据实际情况配置这个跨域xml文件。

注意：

文件上传一般是和apache的commonfileupload使用，可能会设计到改该jar的临时目录问题，特别是部署在linux上时，尤其要考虑不同用户的临时目录权限问题，具体可以参考http://blog.csdn.net/wlsyn/article/details/12155415



标签：

相关文章