当前访客身份:游客 [ 登录 | 加入 OSCHINA ]

代码分享

当前位置:
代码分享 » JavaScript  » 常用工具方法
v1-alpha

跨域上传文件组件

v1-alpha 发布于 2016年07月21日 22时, 0评/379阅
分享到: 
收藏 +0
0
跨域上传文件组件的js代码
1) 用window.name来跨域,此处省去后台的上传下载文件代码,
2) ie js不能模拟文件选择框点击,form无法提交,
3) 兼容性问题onload onreadystatechange 改成jquery.one
标签: <无>

代码片段(3) [全屏查看所有代码]

1. [代码]跨域上次文件组件js代码     跳至 [1] [2] [3] [全屏预览]

define(function(require, exports, module) {
	/**
	 * config={
	 * 		parentId:'父容器id',
	 * 		fileName:'',
	 * 		uploadFileURL:'',
	 * };
	 * */
	var UploadFile=function(config){
		this.parentId='';
		this.id='';
		this.fileName='';
		this.fileId="";
		this.showDownLink=true;
		this.uploadFileURL='';
		this.downloadFileURL='';
		this.accept='';
		this.editable=true;
		this.afterUploadFile=function(fileName){};
		$.extend(this,config,true);
		this.id=this.id||(this.parentId+'uploadFile');
		this.$parentId=$('#'+this.parentId);
		this.init();
	};
	UploadFile.prototype={
		init:function(){
			this.render();
			this.baseBind();
			this.editable&&this.editableBind();
		},
		render:function(){
			//增加操作的上传控件和下载链接
			var html=[],
				accept=this.accept?'accept="'+this.accept+'"':'',
				linkShow=this.fileName?'':'style="display:none"';
			html.push('<div class="col-xs-10" style="padding-left:0">');
			html.push('	<input type="input" value="'+(this.fileName||'')+'" class="form-control readbind writebind" style="cursor:pointer" readonly name="bisRequireDoc" id="'+this.id+'-bisRequireDoc">');
			html.push('</div>');
			html.push('<div class="col-xs-2" style="padding:0">');
			html.push('	<p class="form-control-static" style="cursor: pointer;" ><a '+linkShow+' class="link-download">下载</a></p>');
			html.push('</div>');
			this.$parentId.html(html.join(""));
			
			var $showInput=$('#'+this.id+'-bisRequireDoc');
			//增加隐藏的文件提交form  
			var opacityStr;
			if (!!window.ActiveXObject || "ActiveXObject" in window) 
				opacityStr="";
			else
				opacityStr="opacity:0; filter:alpha(opacity=0);";
			html=[];
			html.push('<div style="'+opacityStr+'position:absolute;width:'+$showInput.outerWidth()+'px;height:'+$showInput.outerHeight()+'px">');
			html.push('	<form action="'+this.uploadFileURL+'" name="'+this.id+'-form" id="'+this.id+'-form" encType="multipart/form-data"  method="post" target="'+this.id+'-hidden_frame" >   ');
			if(this.editable)
				html.push('		<input  type="file" '+accept+' class="form-control readbind writebind" name="file" id="'+this.id+'-file"/>');
			html.push('	</form> ');
			html.push('		<iframe style="display:none" src="javascript:void(0)" name="'+this.id+'-hidden_frame" id="'+this.id+'-hidden_frame"></iframe>   ');
			html.push('</div>');
			this.$parentId.append(html.join(""));
		},
		baseBind:function(){
			var that=this;
			//点击链接按钮下载文件
			this.$parentId.on('click','.link-download',function(){
				if(that.downloadFileURL)
					window.location.href=that.downloadFileURL+that.fileId;
				return false;
			});
		},
		editableBind:function(){
			var that=this,
				frameId=this.id+'-hidden_frame',
				$bisRequireDoc=$('#'+this.id+'-bisRequireDoc'),
				$fileId=$('#'+this.id+'-file'),
				$form=$('#'+that.id+'-form');
			//点击输入框时间:
			$bisRequireDoc.on('click',function(){
				$fileId.click();
				return false;
			});
			//当上传控件值变化的时候,上传文件到服务器
			$fileId.on('change',function(){
				that.beforeUploadFile&&that.beforeUploadFile();
				$form.attr('action',that.uploadFileURL);
				//$form.submit();
				document.getElementById(that.id+'-form').submit();
			});
			
			var iframe=document.getElementById(frameId),oldName=iframe.name;
			
			//文件上传到服务器后返回 保存的文件名称
			var getData=function(e){
				$(iframe).one("load",function(e1){
					var param,iframeWindow,paramObj={};
					if(window.frames[frameId].contentWindow)
						iframeWindow=window.frames[frameId].contentWindow;
					else
						iframeWindow=window.frames[frameId];
					if(iframeWindow.name==that.id+'-hidden_frame')
						param=oldName;
					else
						param=iframeWindow.name||oldName;
					
					$.each(param.split('&'),function(index,e){
						var kv=e.split("=");
						paramObj[kv[0]]=unescape(kv[1]);
					});
					//回写文本框的文件名
					$bisRequireDoc.val(paramObj.fileName);
					that.fileName=paramObj.fileName;
					that.fileId=paramObj.id;
					//显示下载链接
					that.showDownLink&&$('.link-download',that.$parentId).css('display','inline');
					that.afterUploadFile(paramObj);
					//重置
					iframeWindow.name=that.id+'-hidden_frame';
					$(iframe).one("load",getData);
				});
				try{
					var iframeWindow;
					if(window.frames[frameId].contentWindow)
						iframeWindow=window.frames[frameId].contentWindow;
					else
						iframeWindow=window.frames[frameId];
					oldName=iframeWindow.name;
				}catch(e){}
				iframe.src="/uploadFile/crossDomainB.jhtml";
			};
			$(iframe).one("load",getData);
		},
		getFileName:function(){
			return this.fileName;
		},
		setFileName:function(fileName){
			this.fileName=fileName;
			$('#'+this.id+'-bisRequireDoc').val(fileName);
		},
		setFileId:function(fileId){
			this.fileId=fileId;
		}
	};
	return UploadFile;
});

2. [代码]上传文件请求返回的iframe页面     跳至 [1] [2] [3] [全屏预览]

<!DOCTYPE html>
<html>
<head>
<title>文件上传</title>
</head>
<body>
<script type="text/javascript">

	window.name='id='+escape('${att.id}')+'&fileName='+escape('${att.fileName}');

</script>
</body>
</html>

3. [代码]demo     跳至 [1] [2] [3] [全屏预览]

this.$UploadFile=new UploadFile({
    editable:true,
    parentId:'uploadFile',
    showDownLink:false,
    uploadFileURL:this.rescatalogDomain+"/attachment/upLoadPage.jhtml",
    beforeUploadFile:function(){
        mask.show();
        $('#uploadFileModal').modal('hide');
    },
    afterUploadFile:function(data){
        mask.hide();
        that.vm.message.attachment=data.id;
    }
});    

/**页面代码
<div class="form-group ">
    <label  class="col-xs-2 control-label ">附件:</label>
    <div class="col-xs-7" id="uploadFile"></div>
</div>
*/


开源中国-程序员在线工具:Git代码托管 API文档大全(120+) JS在线编辑演示 二维码 更多»

开源从代码分享开始 分享代码
v1-alpha的其它代码 全部(11)...