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

文件上传之普通上传

2024-07-17 11:40:10   219人阅读

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

 

 
 


联系
我们