Hello Js

导航

form批量模拟异步提交文件

这个是工作需要而写的一个小组件,本来是闲暇余为了方便开发写的,今天因为需要用,就拿过来,发现还蛮好用的。

最近看了中国近代史,看到康熙和雍正的勤奋,雍正每年只生日的时候才休息一天。深觉惭愧,自身本身资质平庸一般,如再懒散,后果堪忧,勤思勤学,方为我辈正道。

代码贴过来,其实这里面有一个之前费力气解决的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,也可以进行简单重组后重新使用。

嗯,努力学习,天道酬勤,相信自己会越来越出色的。

posted on 2012-11-16 11:22  苏拉A梦  阅读(521)  评论(0编辑  收藏  举报