阅读:
l Web Secret:图片服务(一)——构建一个基本的图片服务
l Web Secret:图片服务(二)——扩展您的图片服务
l Web Secret:图片服务(三)——为您的服务加上缓存
l Web Secret:图片服务(四)——重新设计您的存储架构
l Web Secret:图片服务(五)——提高服务的性能
我们在第一篇就提到了最基本的图片服务需要一个图片上传页面,下面是最简单的HTML代码:
<form id="from1" action="UploadImage.php" enctype="multipart/form-data">
<label for="imageTitle">标题:</label>
<input type="text" name="Title" id="imageTitle" /><br />
<label for="imageFile">图片:</label>
<input type="text" name="ImageFile" id="imageFile" value="请选择文件" /><br />
<input type="submit" value="上传" />
</form>
除了需要在表单增加“enctype="multipart/form-data"”之外,其它也不用太多的调整。那我们需要怎样的功能呢,才能够使我们精心设计的服务用户体验更好:
l 我希望支持一次性上传多个文件
l 我希望上传过程中可以显示进度
l 我希望限制上传文件的格式,比如只支持jpg(jpeg)、png和gif格式的图片
l 因为和其它业务集成(如发blog或者帖子),我希望不刷新当前页面
l ……
关于文件上传有相当多成熟的解决方案,而且相当多的方案是和服务器代码集成的,你可以根据自己的需要,大多是基于JavaScript解决方案的,你可以通过搜索“Multi File Upload”找到很多脚本类库,如果您是使用jQuery,那么可以通过这里找到更多的解决方案,如果是使用Prototype,也有很多的插件可以选择,你可以在Scripteka找到很多有用的插件,当然了,还有Mootools、DojoToolkit、YUI、ExtJS等框架可以选择,而针对不同的框架,也提供了对于文件上传的支持。我没有给出具体的链接,只是想解释一下不同需求的技术考虑:
1、 上传多个文件
最简单的做法是在上传表单内放置多个<input type=”file”/>的HTML元素。另外一种方式就是用脚本动态生成文件上传控件,如http://www.fyneworks.com/jquery/multiple-file-upload 所展示的。
2、 限制上传的文件格式
在form的onsubmit事件中判断文件后缀,如果不符合期望的文件格式,取消表单提交。
3、 不刷新当前页面
我们可以选择用Iframe,在IFrame内的页面只显示上传相关的页面,比如CSDN的发表blog页面,然后通过脚本的方式将上传之后的图片地址通知上级页面。
4、 显示文件上传进度
对于上传大文件和批量上传的时候尤其有用,因为文件上传过程中是阻塞的,因为文件大或者网络的缘故,将可能导致阻塞时间过长,另外默认情况下上传的所有数据都在服务器内存缓存,如果上传过大的文件,将有可能导致拒绝服务攻击(DOS)。
对于ASP.NET,默认情况文件大小的上限是4MB,这是在系统的machine.config中定义的,当然了,你可以在web.config中覆盖,具体如下:
将默认的大小限制修改为20480KB,也就是20M,超时实践为240秒
<system.web>
<httpRuntime executionTimeout="240" maxRequestLength="20480" />
</system.web>
这种调整是针对于整个网站而言的,如果不想如此做,可以针对某一个目录进行调整,如/Upload/ImageUpload.aspx,只要调整Upload目录就可以。
<location path="Upload">
<system.web>
<httpRuntime executionTimeout="240" maxRequestLength="20480" />
</system.web>
</location>
但是对于更大的文件呢,这里完成的仅仅是一步,一篇名为文件上传的不为人知一面的文章揭示了更多有关与IIS配合完成文件上传的细节。从技术上讲是利用隐含的HttpWorkerRequest,用它的GetPreloadedEntityBody 和 ReadEntityBody方法从IIS为ASP.NET建立的pipe里分块读取数据,对于每块分块进行分析并存储为临时文件,然后给浏览器一个回调地址,那么浏览器就能够显示当前完成的进度了。这时候需要使用到HttpModule,这个时候将会导致原来的文件上传无法获得文件流的情况,当然了,也不是没法解决。目前有几个方案可以选择:
· FileUploader.NET (MediaChase公司,$310以上)
· RadUpload (Telerik公司,$249)
· NeatUpload (免费,遵守LGPL协议)
· SlickUpload5 (免费)
在PHP的环境下同样有很多种方案可以选择,我只是列举出几个主要的:
1. PHP的创始人Rasmus Lerdorf 写的APC扩展模块来实现,http://pecl.php.net/package/apc。
实现方法:
l 安装APC,参照官方文档安装,可以使用PECL模块安装方法快速简捷
l 配置php.ini,设置参数 apc.rfc1867=1 ,使APC支持上传进度条功能,在APC源码说明文档里面有说明
代码范例:
if
(
$_SERVER
[
‘REQUEST_METHOD‘
]==
‘POST‘
)
{
//
上传请求
$status
=
apc_fetch
(
‘upload_‘
.
$_POST
[
‘APC_UPLOAD_PROGRESS‘
]);
$status
[
‘done‘
]=
1
;
echo
json_encode
(
$status
);
//
输出给用户端页面里的ajax调用,相关文档请自己寻找
exit;
}
elseif
(isset(
$_GET
[
‘progress_key‘
]))
{
//
读取上传进度
$status
=
apc_fetch
(
‘upload_‘
.
$_GET
[
‘progress_key‘
]);
echo
json_encode
(
$status
);
exit;
}
else
{
//
其他代码,比如上传表单等
}
2. 使用PECL扩展模块uploadprogress实现(http://pecl.php.net/package/uploadprogress )
3. UGiA,可以通过http://www.ugia.cn/?page_id=74查阅详细的文档
我们上述谈到的都是标准基于Ajax和服务器端实现的,为了让客户端显示更加流畅,我们还有其他技术可以选择:
ü ActiveX
通过ActiveX可以实现你需要的任何功能,比如上传前压缩,转换,也能够上传多图片,对于专业的图片/相册网站,提供一个这样的桌面工具也许是不错的选择,微软的space相册也提供了Windows Live 上载工具,海内网也提供了自己的上传工具。如果您的网站也想用这样的ActiveX而又没有能力自己开发的话,可以考虑购买Aurigma提供的Image Uploader,它的强大功能应该能够满足您的业务需求。
限制ActiveX控件使用的一个关键因素是需要用户安装,同时涉及到安全的原因,不是特定用途的情况下,一般不会推荐这样的方案。
ü Flash
从Flash 8开始,提供了FileReferenceList API,正是因为如此,你可以利用它来实现多文件上传,同时得到详细的文件上传进度。如果你熟悉ActionScript,那么可以利用Flex或者Flash来编写自己的文件上传组件。利用flash的另外一个优势就是可以和javascript无缝集成,
《Ajax+Flash实现多文件上传》展示了不同的解决方案。CodeProject站点上也提供了Multiple File Upload With Progress Bar Using Flash and ASP.NET, 鉴于目前flash播放器的市场占有率,如果不是出于特殊的原因,您几乎可以不用考虑没有安装flash和不支持javascript的情况(试想一下,不支持javascript,也就别谈ajax,不支持flash,还有哪个web 2.0网站是可以玩的?),这时flash作为客户端文件上传的解决方案是不错的选择。
ü SliverLight
作为号称flash杀手的sliverlight,目前已经发展到3.0 Beta,据微软的数据显示,全球已经1/4的浏览器安装了Sliverlight运行时,不过在国内的用户数还是值得怀疑的(可爱又该死的番茄花园),同样作为浏览器插件,也有越来越多关于文件上传的解决方案。CodePlex上你可以找到Sliverlight File Upload,如果你能够确定你的目标用户已经安装或者允许安装sliverlight的话,也不妨考虑。
我们刚才讨论了关键文件上传相关的解决方案,不管是Ajax还是ActiveX、Flash还是sliverlight,都有不同的选择,如果你希望简单又美观的话,flash+服务器代码可能是一个不错的选择,比如asp.net,让你自己实现进度条或者编写httpmodule的话,并不是那么容易的,当然了,如果你有针对语言的完整解决方案,也可以如此使用。
最后我们来看一下图片的显示,作为典型的前端技术,不管是javascript还是flash或者silverlight,要列出清单的话,估计都会超过1000个,形形色色的插件、组件都可以帮我们来完成这个工作,至于该如何选择,我的原则是尽可能简单,不要为了特效而无畏地消耗浏览器的运算资源,如果访问您的网站会到导致用户CPU过高的话,这不是一件好事情。
如果你的业务比较简单,就选择一个适合自己的插件就可以了,如果比较复杂,需要圈人、Tag、留下脚印等等流行的SNS功能的话,更好的建议是自己开发,如果特效不是很多,用ajax会快一点,如果是特效比较多,虽然Ajax也能够完成许多效果的模拟,但是运行效率会存在问题,这时可以选择用ActionScript来开发Flash,你是设计师,你就选择Flash,如果是开发人员,需要大量的和后台数据交互,你选择Flex,熟悉C#的话,用Silverlight也可以。
全文到这里已经讨论了一个图片服务可能涉及的方方面面(至少我想到的)。我的初衷并不是一定要构建一个如此复杂的图片服务,这也是我分成多个篇幅的重要原因,在不同篇幅里关注和讨论的内容是不一样的。我只是希望通过这样的探讨来阐述作为一个架构师(或者在路上)你在面对业务的时候应该如何思考问题。
没有哪一个环节是必须的,但是任何一个问题都有可能是你碰到的,这个时候你对于解决方案的平衡尤为重要,有一些可以简化,有一些需要深入,也有一些可以放弃。而作为Web架构师,除了需要考量你技术的全面性,更加考虑你对于业务的理解力和掌控的尺度,只有这样,才能够在你的技术框架设计中找到平衡。
而平衡的能力,是平衡业务与技术实现的能力,也是一个优秀的架构师最基本的素质。
预告:
接下来我将探讨Web 2.0网站里头大规模用户的互动问题——WebIM,大多网站想提供却发现并不那么容易的事情。我们将会涉及到Ajax、Comet和服务器端的大规模用户连接的设计,敬请期待。
分享到:
相关推荐
Running —— 同城约跑平台这个项目是一个微信小程序,API部分是用ThinkPHP5写的本作品是用来参赛的,目前还在开发中,中途会不定时的提交代码,数据库部分当项目结束后提交本程序不允许做商业用途,转载请标明出处...
git-secret使用允许的用户公钥加密文件,从而使您信任的用户可以使用pgp及其私钥访问加密的数据。 使用git-secret ,可以简化对访问权限的更改,并为您处理私钥-公钥问题。 撤销某人的许可后,无需使用git-secret...
复制代码 代码如下:# _*_ coding: utf-8 _*_#—————————————# 程序:把本地文件上传到七牛云服务器# 版本:0.1# 作者:liu jia# 日期:2014-01-07# 语言:Python 2.7#————————————— ...
验证github-webhook-secret 验证在发送的。该secret将用作在X-Hub-Signature标头中生成HMAC十六进制摘要值的密钥。 安装 :building_construction: $ npm install --save verify-github-webhook-secret 或者如果您...
MYSQL密码忘记,无法进入mysql。破解MYSQL的root的密码
私评JAVA轻量级评论系统为啥要搞这个没有好用的评论系统啊!... 1 // 站点secret secret: testsecret // 要使用私评的网站域名 site-url: https://www.yoursite.com // 要使用私评的url filter-patterns: /article/*在
Github Action更新存储库机密 使用更新存储库机密。 假定秘密已经存在。... 如果您不希望此值显示在日志中,请确保已将其标记! 请参阅文档如何 pa_token 必需的个人访问令牌,具有访问更新存储库机密的权限
Qt-Secret:支持RSA和AES算法的简单加密库
方法:帝国CMS后台——系统——备份与恢复数据——执行SQL语句 一、加入当面付支付方式:执行如下SQL代码 insert into `[!db.pre!]enewspayapi` (`payid`, `paytype`, `myorder`, `payfee`, `payuser`, `partner`, `...
秘密 它将帮助您秘密地隐藏您的照片和视频
vim-secret:Vim的私人写模式
Secret:极客学院-秘密APP原始码
RedM Web地图基于实时网络的地图,显示了玩家的位置以及有关服务器的其他信息。例子安装将resource文件夹的内容复制到RedM服务器的resource文件夹中的目录中。 示例: /var/redm/server-data/resources/[local]/web...
路由器基本配置命令 路由器基本配置命令,总结如下: enable 进入特权配置模式 config terminal 进入全局配置模式 ...enable secret ** 设置加密使能口令 enable password ** 设置明文使能口令 ^^^^^^^^^^^^^^^^^^
是否曾经想隐藏文件? 现在,您可以非常轻松... 然后,当您想要解密foo.txt.secret ,可以运行: secret --decrypt foo.txt.secret bar.txt 您必须输入与加密数据时相同的密码。 然后Secret解密foo.txt.secret并将数
Terraform secret提供者 :purple_heart: secret提供者的任务是:在Terraform状态下存储秘密。 在采用此方法之前,请注意您的安全立场! 该提供程序的主要目标是,很多时候,terraform始终在其状态文件中包含秘密...
2014 年 12 月 18 日更新: Secret 改变了商业模式并删除了在 Web 上查看 Secrets 的功能。 此 API 现在已弃用。 2015 年 4 月 29 日更新: Secret 不再是一家公司了 :(用法基本网址: : 输出: JSON获取今日热门...
Take Assessment: Exercise 1: Decoding Lab secret.cpp文件
CLI大部分应该只是围绕您创建的使用主目录中的密钥文件创建的secret软件包的包装。 有关在不同操作系统上创建CLI或查找主目录的更多信息,请参阅。 开发人员使用该secret程序包最终版本的方式应如下所示: v := ...
选项为all , private , selectedselected_repository_ids产出地位响应状态码数据响应JSON负载 例子 对于个人回购 uses : hmanzur/actions-set-secret@v2.0.0with : name : ' MY_SECRET_NAME ' value : ' Lorem ...