浏览 3365 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2011-08-05
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] }
声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |