js代码――依赖base.js和jquery
/**
* Begin class defination Uploader : 上传文件类
*/
var Uploader = Base.extend({
constructor : function(btn, params){
this.input_id = btn;
if(params)
Utils.extend(this._options, params);
this.init_upload();
},
_options : {
input_file_name : 'qqfile',
action : 'upload.do',
params : {},
allow_ext_ll : ['txt', 'doc'],
size_limit : 1024 * 1024 * 5,
messages : {
type : '不支持的文件类型！',
empty : '请选择上传文件！',
size : '上传文件大小超过限制！'
},
on_complete : function(file_name, json){},
on_progress : function(){}
},
// button
input_id : 'btn_uploader',
_el : null,
_input : null,
init_upload : function(){
this._el = $("#" + this.input_id);
if(this._el.size() == 0){
throw new Error('上传按钮目标不存在！');
}
this._el.css({
position: 'relative',
overflow: 'hidden',
// Make sure browse button is in the right side
// in Internet Explorer
direction: 'ltr'
});
this.input_reset();
},
input_reset : function(){
if(this._input){
this._input.remove();
}
this._input = Uploader.create_input(this._el, this._options['input_file_name']);
_self = this;
this._input.change(function(){
_self.input_change();
});
},
input_change : function(){
var r = this.file_valid(this._input[0]);
if (r.error){
alert(this._options.messages[r.error]);
}else{
this.upload(this._options.params);
}
this.input_reset();
},
file_get_name : function(){
return this._input.val().replace(/.*(\/|\\)/, "");
},
file_valid : function(file){
var name,size,ext;
if (file.value){
// it is a file input
// get input value and remove path to normalize
name = file.value.replace(/.*(\/|\\)/, "");
ext = name.substring(name.lastIndexOf('.') + 1);
} else {
// fix missing properties in Safari
name = file.fileName != null ? file.fileName : file.name;
size = file.fileSize != null ? file.fileSize : file.size;
}
if (!this._options.allow_ext_ll.contains(ext)){
return {error: 'type'};
} else if (size === 0 || !name || name.trim() == ''){
return {error: 'empty'};
} else if (size && this._options.size_limit &&
size > this._options.size_limit){
return {error: 'size'};
}
return {error: false};
},
upload: function(params){
var file_name = this.file_get_name();
var _iframe = Uploader.create_iframe(this.input_id);
var _form = Uploader.create_form(_iframe,
this._options.action, params);
_form.append(this._input);
_self = this;
_iframe.load(function(){
iframe = _iframe[0];
if (!iframe.parentNode){
return;
}
if (iframe.contentDocument &&
iframe.contentDocument.body &&
iframe.contentDocument.body.innerHTML == "false"){
return;
}
_self._options.on_complete(file_name,
Uploader.get_json_iframe(iframe));
// timeout added to fix busy state in FF3.6
setTimeout(function(){
_iframe.remove();
}, 1);
});
_form.submit();
_form.remove();
},
cancel: function(){
var _iframe = $("iframe[name='" + this.input_id + "']");
if (_iframe.size() > 0){
// to cancel request set src to something else
// we use src="javascript:false;" because it doesn't
// trigger ie6 prompt on https
_iframe.attr('src', 'javascript:false;');
_iframe.remove();
}
}
},{
// static properties and methods
tpl : '<tr class="tr_nc">' +
'<td><input type="checkbox" name="chx_files" value="${0}" /></td>' +
'<td>${1}</td>' +
'<td>${2}</td>' +
'<td>${3}</td>' +
'<td>${4}</td>' +
'</tr>',
btn_uploader_del : function(url){
var _chxs = $("input[name='chx_files']:checked");
if(_chxs.size() > 0){
if(confirm('确定要删除所选附件么？')){
var ids = _chxs.map(function(){
return $(this).val();
}).get().join(',');
$.get(url, {file_ids: ids}, function(data){
if(data.error){
alert(data.error);
}else{
_chxs.parents("tr.tr_nc").remove();
}
});
}
}else{
alert('请选择要删除的附件！');
}
},
create_iframe : function(id){
var _iframe = $('<iframe src="javascript:false;" name="' + id + '" />');
// src="javascript:false;" removes ie6 prompt on https
_iframe.attr('id', id).css('display', 'none');
$(document.body).append(_iframe);
return _iframe;
},
create_form : function(_iframe, action, params){
var _form = $('<form method="post" enctype="multipart/form-data"></form>');
var query_str = '?';
for (var key in params){
query_str += '&' + key + '=' + encodeURIComponent(params[key]);
}
_form.attr('action', action + query_str);
_form.attr('target', _iframe.attr('name'));
_form.css('display', 'none');
$(document.body).append(_form);
return _form;
},
create_input : function(_el, name){
var _input = $("<input />");
_input.attr("type", "file");
_input.attr("name", name);
// IE and Opera, unfortunately have 2 tab stops on file input
// which is unacceptable in our case, disable keyboard access
if (window.attachEvent){
// it is IE or Opera
_input.attr('tabIndex', "-1");
}
_input.css({
position: 'absolute',
// in Opera only 'browse' button
// is clickable and it is located at
// the right side of the input
right: 0,
top: 0,
'z-index': 1,
'font-size': '13px',
margin: 0,
padding: 0,
cursor: 'pointer',
opacity: 0
});
_el.append(_input);
return _input;
},
get_json_iframe: function(iframe){
// iframe.contentWindow.document - for IE<7
var doc = iframe.contentDocument ? iframe.contentDocument: iframe.contentWindow.document,
response;
try{
response = eval("(" + doc.body.innerHTML + ")");
} catch(err){
response = {error: doc.body.innerHTML};
}
return response;
}
});
?
<script language="javascript">
var upload_callback = function(file_name, json){
if(typeof json == 'string'){
alert(json);
}else if(json.error){
alert(json.error);
}else{
var tr_tpl = Uploader.tpl.format(
json['file_id'],
json['file_name'],
json['file_ext'],
json['upload_date'],
json['file_des']);
$("#upload_file_ll").append(tr_tpl);
}
}
$(function(){
$("#btn_uploader_remove").click(function(){
Uploader.btn_uploader_del('remove_upload2.gy');
});
new Uploader('file_uploader', {
action : 'upload2.gym',
on_complete : upload_callback
});
});
</script>
<table id="upload_file_ll" class="table_n">
<tr class="tr_nh">
<td></td>
<td>
文件名
</td>
<td>
附件类型
</td>
<td>
上传时间
</td>
<td>
附件说明
</td>
</tr>
</table>
<table class="table_n">
<tr>
<td colspan="3" style="text-align:center;">
<input type="button" class="button1" value=" 查看附件 " />
<input type="button" class="button1" value=" 删除附件 " id="btn_uploader_remove" />
<input type="button" class="button1" value=" 上传附件 " id="btn_uploader" />
</td>
</tr>
<tr>
<td width="48%"></td>
<td style="text-align:center;">
<span id="file_uploader" class="button1">Uploader</span>
</td>
<td width="48%"></td>
</tr>
</table>
?
?
后台处理文件上传的代码例子（我做了封装）：只是返回数据让js回调而已。
def Map upload2(){
if(params._files){
def item = params._files.getOne('qqfile')
if(item){
def ff = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss")
return [json: true,
file_id: 123,
upload_date: ff.format(new Date()),
file_ext: item.fileExt,
file_size: item.binary.size(),
file_name: item.fileName]
}
}
return [json: true, file_size: 0]
}
?
?
?