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

最近在项目开发中,需要将不同的项目底下的图片传到一个共同的文件服务器上,而这些项目是部署在不同的机器上的,这就涉及到文件跨域上传的问题。由于在之前的项目中,都是使用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目录底下:



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


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

注意:

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



  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Jquery Uploadify 是一个基于 Jquery文件件,它使用 Flash 技术来实现文件功能。它简单易用,可以方便地进行文件,并提供了多个自定义选项,如文件大小限制、文件类型限制等。 H5 上指的是使用 HTML5 中的 File API 来实现文件功能。与统的 Flash、Java Applet 等方式相比,H5 上更加安全、快速,并且不需要额外安装件。 使用 Jquery Uploadify 进行 H5 上,可以通过以下步骤进行操作: 1. 下载并引入 Jquery Uploadify 文件,并确保引入了 jQuery 库。 2. 在 HTML 文件中创建一个显示上文件的容器,如: <div id="file-upload-container"> <input type="file" id="file-upload" name="file-upload" multiple> </div> 3. 在 JavaScript 文件中,使用 Jquery 的选择器选取文件,然后调用 Uploadify 件的方法进行初始化,如: $("#file-upload").uploadify({ swf: 'uploadify.swf', // 指定 Flash 文件路径 uploader: 'uploadify.php', // 指定上文件的服务器端处理文件路径 // 其他自定义选项... }); 4. 在服务器端编写处理文件的脚本(uploadify.php)。可以使用 PHP、Java、Python 等服务器端语言进行处理,并根据上结果返回相应的提示信息。 通过以上步骤,我们就可以使用 Jquery Uploadify 件进行 H5 文件了。需要注意的是,由于 H5 上只能在现代浏览器中完全支持,所以在使用时应该检查浏览器兼容性,确保用户能够正常上文件

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值