• 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,也可以进行简单重组后重新使用。

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

  • 相关阅读:
    个性实用的SQL语句
    SiteMesh简介
    oracle基本操作
    java项目中获得不同状态下的磁盘根目录和相对目录。
    linux下安装weblogic 10.3.2.0 及mysql数据源的配置
    SQL Serve 查询所有可用的数据库语句
    [传智播客学习日记]简单工厂模式计算器案例
    [传智播客学习日记]SqlHelper与DataSet
    [传智播客学习日记]序列化、XML序列化与深拷贝操作
    [传智播客学习日记]10月18日第一天正式上课
  • 原文地址:https://www.cnblogs.com/lxin/p/2772893.html
Copyright © 2020-2023  润新知