日期:2014-05-16  浏览次数:20315 次

参考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();