附件上传-前端篇

AMEPRE

2013-06-04

关注关注

经过大半个月的折腾，终于可以出一个自己比较认可的版本。这次心的自我挑衅过程，感觉自己又有成长，还是很想记录一下。过程挺不容易的。

20130514

需求是：实现像QQ邮箱那样的附件上传功能，而且要做成通用的标签文件。供大家调用！

对于一个纯JAVA程序员来说，还是有点难度的。

难点1：如何把之前文件上传控件变成一个按钮？附件上传-前端篇

2：如何获取本地文件的大小？附件上传-前端篇

3：还要支持弹出框？

经过选型，最后选择了OperaMasks-UI的omFileUpload组件。

omFileUpload的最基本用法。action属性指定处理文件上传的服务端地址。swf属性指定处理上传的swf的文件位置。onComplete为上传成功后的回调函数。

在使用过程中，遇到了一些问题。

1.如何和现有的架构结合。struts1.x+spring3.0

2.一个按钮如何变成链接？（感觉很猥琐）

3.显示效果样式如何调整？

4.还有很多顾虑，比如进度条是真的吗？

。。。。。

带着很多问题上路。

=======================================================

20130520

一开始，对这个控件不熟悉，很多不懂怎么用，捣腾了下，又想换别的，比如SWFUPLOAD。。主要还是自己只会JAVA，很多东西受到了限制。

最后还是决定使用operamasks omFileUpload控件。对控件做了一些调整。

还是用了透明技术，以及样式的绝对定位。

最后因为绝对定位的问题，不得不使用了iframe。。。虽然DIV可以实现，但是使用的时候需要去绝对定位它，为了通用性还是决定用iframe.（后来发现这种想法是错误的。）

强大的样式，可以实现这样的定位。经过一段时间的针扎，最后不得不直接copy QQ邮箱的样式。多亏了强大的浏览器。附件上传-前端篇

贴代码：

<script type="text/javascript">
	$(document).ready(function() {
	  $('#file_upload').omFileUpload({
	    action : 'uploadFile.shtml',
	    swf : 'om-fileupload.swf',
	    width : 300,
	    height: 300,
	    multi  :true,
	    queueSizeLimit : 10,
	    //autoUpload : true,
	    removeCompleted:false,
	    onComplete : function(ID,fileObj,response,data,event){
		    var jsonData ="";
		    try{
		      jsonData = eval("("+response+")");
		    }catch(e){
		    	alert("出错，请联系管理员!");
		    }
		    $("#" + $(event.target).attr('id') + ID).find('.percentage').html("<a target=\"_blank\" href="+jsonData.fileUrl+">点击浏览</a>");
	    }
	  });
	});
 
	</script>

<div class="input_title" style="padding-top: 10px; padding-bottom: 8px;"  >
	 <span id="attachupload" style="display: none;"></span>
          <span id="composecontainer"><span class="compose_toolbtn qmEditorAttach dragAndDropTrap_box">
          <span title="添加小于 50M 的文件作为附件" id="AttachFrame" style="position: relative;"   sizelimit="50">

	<span style="left: 0px; top: 0px; width: 66px; height: 16px; overflow: hidden; filter: alpha(opacity=0); position: absolute; z-index: 1; cursor: pointer; zoom: 1; opacity: 0; background-color: rgb(255, 255, 255);">
	<input style="width: 200px; height: 200px; right: 0px; font-family: Times; font-size: 50px; position: absolute; cursor: pointer;" id="file_upload" name="file_upload" type="file" /></span>
<a   class="compose_toolbtn_text ico_att" onmousedown="return false;" onclick="return false;">
<span id=sAddAtt1>添加附件</SPAN>
<span style="DISPLAY: none" id=sAddAtt2 onmousedown="return false;" onclick="return false;">继续添加</span></a>

 <button value="上传" onclick="$('#file_upload1').omFileUpload('upload')">上传</button>

效果：
附件上传-前端篇