参考qqfileuploader写个js iframe式的上传文件

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=" 查看附件 " />&nbsp;&nbsp;
				<input type="button" class="button1" value=" 删除附件 " id="btn_uploader_remove" />&nbsp;&nbsp;
				<input type="button" class="button1" value=" 上传附件 " id="btn_uploader" />&nbsp;&nbsp;
			</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]
	}