资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/[未完待续] 上传文件这件事，蛋疼何止一点点！

[未完待续] 上传文件这件事，蛋疼何止一点点！

tinyq / 575人阅读

摘要：在做时，不可避免地要上传一些文件，最常用到的就是图片。提供电子邮件服务的站点，除了图片还需要上传文档等其他类型文件的功能。当点击所看到的按钮时，实际点击的是原生上传控件，这样一来就触发了浏览器默认行为，即打开选择文件对话框。

在做 Web App 时，不可避免地要上传一些文件，最常用到的就是图片。在线相册及图片收藏网站等以提供图片存储服务的站点自不用说，社交网络的头像、发布信息等都需要上传图片的功能。提供电子邮件服务的站点，除了图片还需要上传文档等其他类型文件的功能。

如果是几年前，这种功能用最原始的

（下文用「表单」指代）就能轻松地实现，只需在提交时加个遮罩层防止用户瞎点就可以了。然而，随着 web 的发展与人们审美的提高，这种简单粗暴的方式越来越不受人待见——就像在大家都懂得打扮自己时你却还灰头土脸穿得跟工地里的农民工一样——太不优雅！

表单的「挫」点主要体现在以下几个方面：

土掉渣

虽然 （下文用「原生上传控件」指代）在各个浏览器中的外观不甚相同，但有共同的特点——丑，并固执着！说它「固执」是因为无法通过 CSS 对其进行外观上的改造。

互动性差

如果是理想情况下，文件会很快传完，用户的心情会很愉快；但当遇到文件体积过大或者网速过慢的情况，在等了几分钟、十几分钟甚至是几十分钟后文件还没传完，并且不知道已经上传完多少以及大约还需多久能传完时，估计用户就该抓狂想要砸电脑了吧！

不能进行其他操作

表单在提交后，虽然浏览器显示的是当前页面，但地址栏中的 URL 已经改变，因为是在等待文件完全上传到服务器，所以页面暂时没有刷新。这时用户的操作行为就受到了限制，只能默默地等待文件上传结束……

一个人长得丑，那没有办法，这是天生的，但不代表没有魅力——可以靠着装打扮、学识经历、金钱地位等弥补天生的缺陷。「上传文件」也可以像「矮穷挫」一样逆袭成为「高富帅」！至于如何逆袭，我相信每个人都有自己的见解，这里就说说我所想、我所了解的。

换个造型

即使原生上传控件本身无法通过 CSS 对其进行改造，可还是有办法让它看起来很「帅」的——用口红、胭脂等化妆品将其丑陋的外表遮掩起来。

  1. html

  2.   
  3.

当写了一个非常好看的替代原生上传控件的按钮，用以上方式通过 Chrome 或 Firefox 弹出系统对话框选择文件并成功上传到服务器后，想必会雀跃不已地夸自己一句——「我真特么是个天才！」

每实现一个新功能后必定要测试一下 IE 的兼容性。打开 IE9，重复一遍操作步骤，本来以为会正常弹出对话框的，它却——

</>code
  1. javascriptSCRIPT5: 拒绝访问。

「尼玛！！！有没有搞错？！IE9 居然会有问题？！话说，这个异常是什么意思啊？！问题出在哪里都没有提示！！！」——看到控制台中输出那行红色的字符串之后，估计你的内心当中有如千万匹草泥马在奔腾！

你肯定以为 IE9 会比 IE8 高级些，可事实往往是残酷的！在表单处理上，它俩都不允许利用 JavaScript 触发原生上传控件的 click 事件。

那怎样才能既隐藏掉原生上传控件，又弹出选择文件的系统对话框呢？

</>code
  1. html

  2.   选择文件
  3.

虽然说是「隐藏」，但只是让原生上传控件「不可见」而已，它还是妥妥地在表单中占据着空间位置。当点击所看到的「按钮」时，实际点击的是原生上传控件，这样一来就触发了浏览器默认行为，即打开选择文件对话框。

XHR 上传 跨域
GPU云服务器 云服务器 蛋疼 这件 待续费 邮箱待续费

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91513.html

相关文章

  • 案例 - 收藏集 - 掘金

    摘要：同行这么做使用实现圆形进度条前端掘金在开发微信小程序的时候，遇到圆形进度条的需求。实现也谈数组去重前端掘金的数组去重是一个老生常谈的话题了。百度前端技术学院自定义前端掘金一标签概念元素表示用户界面中项目的标题。 闲话图片上传 - 掘金作者：孙辉，美团金融前端团队成员。15年毕业加入美团，相信技术，更相信技术只是大千世界里知识的一种，个人博客: https://sunyuhui.com ...

    张金宝 评论0 收藏0

  • 案例 - 收藏集 - 掘金

    摘要：同行这么做使用实现圆形进度条前端掘金在开发微信小程序的时候，遇到圆形进度条的需求。实现也谈数组去重前端掘金的数组去重是一个老生常谈的话题了。百度前端技术学院自定义前端掘金一标签概念元素表示用户界面中项目的标题。 闲话图片上传 - 掘金作者：孙辉，美团金融前端团队成员。15年毕业加入美团，相信技术，更相信技术只是大千世界里知识的一种，个人博客: https://sunyuhui.com ...

    huangjinnan 评论0 收藏0

  • 自己撸个简单的ps切图脚本（未完待续…）

    摘要：刚做完的一个项目里，为了切图方便，接触了下的脚本功能。这里解释一下，也就是本文所讨论的脚本，并不只有可以用，都是可以用的，不过需要调用各自不同的。一些脚本的线上参考资料常用部分汉化版常数表初识脚本留坑待续 刚做完的一个H5项目里，为了切图方便，接触了下Photoshop的脚本功能。从找资料、写脚本到实际能用全套跑了一圈下来发现，嗯，果然是挺难用的[捂脸]。不过虽然缺点满满，但PS这个平...

    draveness 评论0 收藏0

发表评论

登陆后可评论

0条评论

tinyq

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<