上传控件与select美化，上传的实现细节

1. html中input为file的样式美化（美化的基本思路就是将原生的上传控件进行透明化处理，在原来的位置重新构造input框和button，并且对原生的上传控件使用绝对定位，定位到重新定义的button处，当点击的时候模拟了上传的功能，将获取到的文件名称放在定义的输入框中。）

html代码如下

<div class="daoru">
 <input type="text" class="input_text" placeholder="请选择文件">   
<input type="button" class="input_sub"  value="选择" >
<input type="file" name="prjFileList[0].prjContractTransforFile" value="this.value" class="input_file" contenteditable="false"  οnchange="fileChange(this, this.value)">  

</div>  

css代码如下

.daoru {font-size: 13px;position: relative;}  
.daoru .input_text {width: 140px;height: 12px;line-height: 12px;padding: 5px;border: 1px solid #C0C5CB;font-size: 12px;color: #333;outline: none}  
.daoru .input_sub {width: 60px;height: 24px;line-height: 24px;text-align: center;font-size: 13px;color: #fff;border: none;background: #1E9FFF;margin-left: -6px;}  
.daoru .input_file {position: absolute;top: 0;left: 151px;height: 24px;_height: 30px;filter: alpha(opacity : 0);opacity: 0;width: 57px}

2.html中select样式美化

html代码

<div class="docTypeSelect"></div>

css代码

.docTypeSelect, .needAttentTypeSelect, .attentTypeSelect {width: 180px;height: 24px;border-radius: 5px;position: relative;}
.docTypeSelect select, .needAttentTypeSelect select, .attentTypeSelect select{border: 1px solid #D3D3D3;outline: none; width: 100%;height: 24 px;line-height: 24px;appearance: none;-webkit-appearance: none;-moz-appearance: none;padding-left: 4px;}
.docTypeSelect:after, .needAttentTypeSelect:after, .attentTypeSelect:after{content: "";width: 19px;height: 24px;background: url(../../sta/image/combo_arrow.png) no-repeat center;position: absolute;right: 0px;top: 6%;pointer-events: none;border-left: 1px solid #bbb;background-color: #f3f3f3;border-right: 1px solid #bbb;}

3.文件上传的具体实现

（1）enctype="multipart/form-data" 一定要加上

    <form id="prjContractTransforForm" enctype="multipart/form-data" method="POST">

（2）使用input type为file的输入框

<input type="file" name="prjFileList[0].prjContractTransforFile" value="this.value" class="input_file" contenteditable="false"  οnchange="fileChange(this, this.value)">  

(3) java后台使用MultipartFile 类型的数据接收

private MultipartFile prjContractTransforFile; //项目预算上传附件文件

        getOriginalFilename获取上传文件的文件名

(4) 使用UUID生成文件的唯一名称，防止服务器路径下文件名称重复

fileName = UUID.randomUUID().toString() + "_" + originalFilename;

(5)使用FileUtils.copyInputStreamToFile方法将文件通过流的形式写到指定的路径下，该方法不需要关闭流，在方法实现内部已经有关闭流的功能

FileUtils.copyInputStreamToFile(multipartFile.getInputStream(), new File(realPath, fileName));

4.hibernate中double类型的数据控制精度的定义

@Column(name = "BUDGET_RATE", nullable = false, columnDefinition = "double(38,3)")

5.重置表单的快捷方式

$('#prjContractTransforForm').form("reset");

6.带有文件上传的表单提交方式

var form = $('#prjContractTransforForm');
var formData = form.form("getData");
if(form.form("validate")){
form.form('submit', {
url : top.XPM.ctx + "/project/prjContractTransfor/doAdd",
method : 'POST',
onSubmit: function(){
return true;
},
success: function(data){
data = $.parseJSON(data);
if (data.success) {
reset();
} 
$.showMsg(data.message);
}
});
} 

7.横线中带有文字的样式实现

<fieldset><legend>注意事项</legend></fieldset>

8.easyui各输入框灰色设置

disabled:true

9.hibernate中级联删除的配置

使用cascade属性来配置级联删除的功能

@OneToMany(mappedBy = "id.prjId", cascade = {CascadeType.REMOVE})

private List<PrjActivity> prjActivity = new ArrayList<PrjActivity>(0);