这个是工作需要而写的一个小组件,本来是闲暇余为了方便开发写的,今天因为需要用,就拿过来,发现还蛮好用的。
最近看了中国近代史,看到康熙和雍正的勤奋,雍正每年只生日的时候才休息一天。深觉惭愧,自身本身资质平庸一般,如再懒散,后果堪忧,勤思勤学,方为我辈正道。
代码贴过来,其实这里面有一个之前费力气解决的bug,即在IE6,动态加载的iframe会在新窗口打开。我这里在网上找了一个解决的方案
iframe.contentWindow.name = iframeName;
/** * @author linjing03 * 含有图片文件的form表单模拟异步提交; * 所传的参数格式: * var json1 = { formNode : formNode, url : 'index.php', callback : function(string){ console.log('first'); }, onsubmit : function(){ return true; }, onsubmitFail : function(){ } } */ //---------------------------------- var T = require("tangram:base"); var Alert = require("common:alert"); var iframeName = 'postIframe'; var iframaId = 'iframeNode'; var AddEvent = T.event.on; var RemoveEvent = T.event.un; var Tojson = T.json.decode; var form ; var dealFile = { addIframe : function(){ if(!T.g(iframaId)){ var d = document.createElement('iframe'); d.style.display = 'none'; d.id = iframaId; d.name = iframeName; document.body.appendChild(d); } }, setForm : function(json){ form = json.formNode form.target = iframeName; form.action = json.url; }, onsubmit : function(json){ if(json.onsubmit){ var b = json.onsubmit(); return b; }else{ return true; } }, submit : function(json){ var b = dealFile.onsubmit(json); if(b){ form.submit(); }else{ if(json.onsubmitFail){ json.onsubmitFail(); } throw "you have no right to submit the form"; } }, getIframeInnerHtml : function(objIFrame){ var iFrameHTML = ''; if (objIFrame.contentWindow){ iFrameHTML = objIFrame.contentWindow.document.body.innerHTML; }else if (objIFrame.contentDocument){ iFrameHTML = objIFrame.contentDocument.innerHTML; }else if (objIFrame.document){ iFrameHTML = objIFrame.document.body.innerHTML; } return iFrameHTML; }, addLoadEvent : function (json){ iframe.contentWindow.name = iframeName; var f = function(){ var str = dealFile.getIframeInnerHtml(iframe); if(str){ str = Tojson(str); json.callback(str); RemoveEvent(iframe,'load',f); //及时移除事件 } } AddEvent(iframe,'load',f); }, submitData : function(json){ dealFile.setForm(json); //设置表单的属性 dealFile.submit(json); //提交表单 dealFile.addLoadEvent(json); //监听iframe的onload事件; } } //预览图片; dealFile.previewImage = function(json){ if(!window.FileReader){ json.imageHolder.innerHTML = "对不起,您的浏览器不支持图片预览的功能,请使用" +"<a target='_blank' href='http://www.firefox.com.cn/download/'>火狐浏览器</a>" +"或<a target='_blank' href='http://www.google.cn/intl/zh-CN/chrome/browser/'>chrome浏览器</a>进行预览"; return; }else{ dealFile.previewImage = function(json){ var file = json.fileNode.files[0]; /*if(!/image\/w+/.test(file.type)){ console.log('here') Alert.show({ title : "操作提示", content : "请确保上传文件为图片类型" }) return; }else{*/ var reader = new FileReader(); reader.readAsDataURL(file); console.log(reader); reader.onload = function(e){ json.imageHolder.innerHTML = '<img width="'+json.width+'" height="'+json.height+'" src="'+reader.result+'"/>' // } } } } return dealFile.previewImage(json); } dealFile.addIframe(); //在页面添加一个空的iframe; var iframe = T.g(iframaId); iframe.contentWindow.name = iframeName; exports = dealFile;
整个代码是在tangram下开发的,所以用了一些tangram的内置方法,索性依赖不多。即使以后脱离tangram,也可以进行简单重组后重新使用。
嗯,努力学习,天道酬勤,相信自己会越来越出色的。