webx组合uploadify上传文件 _Web前端

webx结合uploadify上传文件

???????? web项目用的是webx 3.0?+ velocity + uploadify控件。

??????? vm页面中定义一个上传控件。

<input id= "up" type="file" name="upload"/>

??? JS中对这个控件初始化。类似这样：

jQuery(document).ready(function() {
	jQuery('#up').uploadify({
            'uploader'  : '/uploadify.swf?t='+ new Date().getTime(),
            'cancelImg' : 'https://static.aliloan.com/sys/js/uploadify/cancel.png',
        	'scriptAccess':'always',
        	'script':'/ajax/epibolyUploadFileFlashAjax.htm',
            'auto'      : false,
        	'queueSizeLimit' : 1,
        	'onComplete'  : function(event, ID, fileObj, response, data) {
        	  jQuery("#responseText").html(response);
        	  jQuery.blockUI({ message: jQuery("#errorMessage"),css:{width:"400px",marginLeft:"-200px"}});
			  jQuery("#isUploadQueueFull").val("")
            },
        	'onCancel'    : function(event,ID,fileObj,data) {
              jQuery('#up').uploadifyClearQueue();
			  jQuery("#isUploadQueueFull").val("")
            },
        	'onError' : function(event, ID, fileObj, errorObj) {
        	 	alert(errorObj.type+"::"+errorObj.info);
				jQuery("#isUploadQueueFull").val("")
            },
			'onSelect'    : function(event,ID,fileObj) {
		      	jQuery("#isUploadQueueFull").val('yes');
    		}
          });
});

?? 防止出现IE不兼容问题,在swf后面加上时间作为一个时间戳。

?? 在“上传”的button上添加click事件，用于处理后续操作，例如传递给web层一些参数。

jQuery(document).ready(function() {
	jQuery("#isUploadQueueFull").val("");

	jQuery('#uploadLink').click(function(){
		if(jQuery("#isUploadQueueFull").val()==""){
			alert("请先选择一个文件");
			return;
		}
		if(jQuery("#uploadTaskId").val()==""){
			alert("任务ID为空,请CTRL+F5强制刷新浏览器!");
			return;
		}
		jQuery('#up').uploadifySettings('scriptData',{epibolyTaskId:jQuery("#uploadTaskId").val(),
												  userEpibolyId:jQuery("#userId").val(),
											      userEpibolyName:jQuery("#userName").val(),
											      userEpibolyType:jQuery("#userType").val()
													});
		jQuery('#up').uploadifyUpload();
	});
});

?? 注意：1、当在js中没有指定传递给后面web层的标识符时，默认的名词为“Filedata”。当你用第三方jar包，例如

org.apache.commons.fileupload.FileItem 时。就需要用到这个标识符。webx中封装了上传功能，如果在webx后面来读流的话是读不到的，而且用webx来注解注入FileItem时，就需要跟上面的默认名称一致了。

public void execute(@Param("Filedata") FileItem fileItem,TurbineRunData rundata, Context context) {
}

2、如果要不走webx框架，则需要在web.xml中的webxFilter中加入

<filter>
<filter-name>webx</filter-name>
<filter-class>com.alibaba.citrus.webx.servlet.WebxFrameworkFilter</filter-class>
<init-param>
<param-name>excludes</param-name>
<param-value><!-- 需要被“排除”的URL路径，以逗号分隔，如/static, *.jpg --></param-value>
</init-param>
<init-param>
<param-name>passthru</param-name>
<param-value><!-- 需要被“略过”的URL路径，以逗号分隔，如/myservlet, *.jsp --></param-value>
</init-param>
</filter>

3、上传控件不能放到弹出层中。IE系列中，因为放到弹出层中由于style.display='none' 那么这个控件就不能得到初始化，虽然可以选择到文件到flash的上传队列中，但不能传输。因为js错误。

?4、如果flash请求不到，很可能是flash的沙箱问题（貌似是这个），要加上合理的域。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE cross-domain-policy SYSTEM  
    "http://www.macromedia.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>

uploadify官方网址：http://www.uploadify.com/?