文件上传之普通上传

前言

记得去年十月份离开基础邮箱项目组，进入云邮局项目组之后，领导曾经嘱咐我将邮箱的上传模块整理成文档，方便其他同事接手。由于各方面原因迟迟未动手，最近终于下定决心，整理自己的笔记，记录邮箱用到的所有上传方式。大概包括：普通上传、139邮箱小工具上传、Flash上传、HTML5上传（含拖拽上传，分块上传，断点续传，秒传等功能）

 

普通上传流程如下：

 

一、应用场景：

单个小文件无需显示上传进度可采用普通上传

 

二、实现效果：

无刷新上传文件

 

三、操作步骤：

步骤一、美化原生的input type='file'

早期的浏览器要求必须点击input type='file'才能弹出文件选择框（很多现代浏览器支持为任意dom元素绑定单击事件，在事件处理程序中调用input type='file'的click事件弹出文件选择框），但是默认的input很丑，我们可以做一个漂亮的上传按钮，然后将input type='file'做成透明的浮层，悬浮在漂亮的上传按钮上，这样用户单击上传按钮实际单击的是input，可兼容所有浏览器，成功弹出文件选择框。

步骤二、准备HTML代码

<form target="_hideFrame_" enctype="multipart/form-data" method="post" action="http://appmail.mail.10086.cn/RmWeb/mail?func=attach:upload&sid=MTQwNzkzNDE2MDAwMTk2NTcwMTUzMQAA000005&composeId=0.5352626114618033&type=internal"> 
<input style="font-size:20px;position:absolute;right:0px;" type="file" name="uploadInput" id="uploadInput"> 
</form> 

<iframe name="_hideFrame_" style="display:none"></iframe>

 

 

步骤三、准备脚本

var commonUpload = {
    // 步骤一、为type='file'绑定onchange事件，change事件触发时提交表单，表单的target属性指向一个隐藏的iframe
    initEvents : function() {
        var This = this;
       
        $("input").change(function() {
            if (!this.value) {
                return;
            }
           
            // 验证文件
            var extName = This.getFileExtName(this.value);
            if ($.inArray(extName, ["jpg", "jpeg", "gif", "bmp", "png"]) == -1) {
                alert("只允许插入jpg,jpeg,gif,bmp,png格式的图片"); 
                form.reset();
                return;
            }
 
            var form = this.form;
            var jFrame = This.getHideFrame();
            try {
                form.submit();
                form.reset();  // 千万不要忘了调用reset方法，不然第二次选择同样的文件时无法触发change事件
            } catch(e) {
                jFrame.attr("src", "/m2012/html/blank.html").load(function() {
                    jFrame.unbind("load", arguments.callee);
                    form.submit();
                    form.reset();
                });
            }
        });
    },
    // 步骤二、创建隐藏的iframe并绑定onload事件，load事件触发时读取服务端输出的上传结果
    getHideFrame : function() {
        var This = this;
        var jFrame = $("#_hideFrame_");
        if (jFrame.length == 0) {
            jFrame = $('<iframe name="_hideFrame_" style="display:none"></iframe>').appendTo(document.body).load(function() {
                This.onUploadFrameLoad(this);
            });
        }
        return jFrame;
    },
    // 步骤三、解析上传结果，获取文件路径，文件大小等信息 用于满足回显图片等需求
    // 例如：139邮箱编辑器插入本地图片上传成功后服务端输出如下报文：
    // <script>document.domain=window.location.host.match(/[^.]+\.[^.]+$/)[0]; var return_obj={'code':'S_OK','var':{"fileId":"1639109220557duesgqlnrq1","fileName":"IMG_1388.JPG","fileSize":2183825}};</script>
    onUploadFrameLoad : function(frame) {
        try {
            var doc = frame.contentWindow.document;
            var html = doc.body.innerHTML || doc.documentElement.innerHTML;
            // TODO 解析上传成功后服务端的响应报文
        } catch(e) {
            console.log('Function:onUploadFrameLoad has a exception!');
        }
    },
    /**
    *获得小写的文件扩展名，不带.号
    *@returns {String}
    */
    getFileExtName: function (fileName) {
        if (fileName && fileName.indexOf(".") > -1) {
            return fileName.split(".").pop().toLowerCase();
        }
        return "";
    }
};