首页 > 代码库 > 文件上传之普通上传
文件上传之普通上传
前言
记得去年十月份离开基础邮箱项目组,进入云邮局项目组之后,领导曾经嘱咐我将邮箱的上传模块整理成文档,方便其他同事接手。由于各方面原因迟迟未动手,最近终于下定决心,整理自己的笔记,记录邮箱用到的所有上传方式。大概包括:普通上传、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 ""; }};
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。