首页 > 代码库 > 文件上传之普通上传

文件上传之普通上传

前言
记得去年十月份离开基础邮箱项目组,进入云邮局项目组之后,领导曾经嘱咐我将邮箱的上传模块整理成文档,方便其他同事接手。由于各方面原因迟迟未动手,最近终于下定决心,整理自己的笔记,记录邮箱用到的所有上传方式。大概包括:普通上传、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 commoUpload = {    // 步骤一、为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 "";    }};