Web Secret:图片服务(六)——优化您的用户体验

阅读:

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)pnggif格式的图片

l  因为和其它业务集成(如发blog或者帖子),我希望不刷新当前页面

l  ……

关于文件上传有相当多成熟的解决方案,而且相当多的方案是和服务器代码集成的,你可以根据自己的需要,大多是基于JavaScript解决方案的,你可以通过搜索“Multi File Upload”找到很多脚本类库,如果您是使用jQuery,那么可以通过这里找到更多的解决方案,如果是使用Prototype,也有很多的插件可以选择,你可以在Scripteka找到很多有用的插件,当然了,还有MootoolsDojoToolkitYUIExtJS等框架可以选择,而针对不同的框架,也提供了对于文件上传的支持。我没有给出具体的链接,只是想解释一下不同需求的技术考虑:

1、 上传多个文件

最简单的做法是在上传表单内放置多个<input type=”file”/>HTML元素。另外一种方式就是用脚本动态生成文件上传控件,如http://www.fyneworks.com/jquery/multiple-file-upload 所展示的。

2、 限制上传的文件格式

formonsubmit事件中判断文件后缀,如果不符合期望的文件格式,取消表单提交。

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方法从IISASP.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还是ActiveXFlash还是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,大多网站想提供却发现并不那么容易的事情。我们将会涉及到AjaxComet和服务器端的大规模用户连接的设计,敬请期待。

相关推荐
<p> <strong><span style="font-size:20px;color:#FF0000;">本课程主要针对计算机相关专业正在做毕设学生与需要项目实战练习Java学习者</span></strong> </p> <p> <span style="color:#FF0000;"><strong><span style="font-size:18px;">1. 包含:<span style="color:#FFFF00;background-color:#FF0000;">项目源码、</span><span style="color:#FFFF00;background-color:#FF0000;">项目文档、数据库脚本、软件工具</span>等所有资料</span></strong></span> </p> <p> <span style="color:#FF0000;"><strong><span style="font-size:18px;">2. 手把手带你从零开始部署运行本套系统</span></strong></span> </p> <p> <span style="color:#FF0000;"><strong><span style="font-size:18px;">3. 该项目附带源码资料可作为毕设使用</span></strong></span> </p> <p> <span style="color:#FF0000;"><strong><span style="font-size:18px;">4. 提供技术答疑和远程协助指导</span></strong></span><strong><span style="font-size:18px;"></span></strong> </p> <p> <br /> </p> <p> <span style="font-size:18px;"><strong>项目运行截图:</strong></span> </p> <p> <strong><span style="font-size:18px;">1系统登陆界面</span></strong> </p> <p> <strong><span style="font-size:18px;"><img src="https://img-bss.csdn.net/202002241015433522.png" alt="" /><br /> </span></strong> </p> <p> <strong><span style="font-size:18px;"><strong><span style="font-size:18px;">2学生模块</span></strong></span></strong> </p> <p> <strong><span style="font-size:18px;"><img src="https://img-bss.csdn.net/202002241015575966.png" alt="" /></span></strong> </p> <p> <strong><span style="font-size:18px;"><strong><span style="font-size:18px;">3教师模块</span></strong></span></strong> </p> <p> <strong><span style="font-size:18px;"><img src="https://img-bss.csdn.net/202002241016127898.png" alt="" /></span></strong> </p> <p> <strong><span style="font-size:18px;"><strong><span style="font-size:18px;">4系统管理员</span></strong></span></strong> </p> <p> <strong><span style="font-size:18px;"><img src="https://img-bss.csdn.net/202002241016281177.png" alt="" /></span></strong> </p> <p> <strong><span style="font-size:18px;"><img src="https://img-bss.csdn.net/202002241016369884.png" alt="" /></span></strong> </p> <p> <strong><span style="font-size:18px;"><br /> </span></strong> </p> <p> <strong><span style="font-size:18px;"><strong><span style="font-size:18px;">更多Java毕设项目请关注我毕设系列课程 <a href="https://edu.csdn.net/lecturer/2104">https://edu.csdn.net/lecturer/2104</a></span></strong></span></strong> </p> <p> <strong><span style="font-size:18px;"><br /> </span></strong> </p>
<p> 课程演示环境:Windows10  </p> <p> 需要学习<span>Ubuntus</span>系统<span>YOLOv4-tiny</span>同学请前往《<span>YOLOv4-tiny</span>目标检测实战:训练自己数据集》 <span></span> </p> <p> <span> </span> </p> <p> <span style="color:#E53333;">YOLOv4-tiny</span><span style="color:#E53333;">来了!速度大幅提升!</span><span></span> </p> <p> <span> </span> </p> <p> <span>YOLOv4-tiny</span>在<span>COCO</span>上性能可达到:<span>40.2% AP50, 371 FPS (GTX 1080 Ti)</span>。相较于<span>YOLOv3-tiny</span>,<span>AP</span>和<span>FPS</span>性能有巨大提升。并且,<span>YOLOv4-tiny</span>权重文件只有<span>23MB</span>,适合在移动端、嵌入式设备、边缘计算设备上部署。<span></span> </p> <p> <span> </span> </p> <p> 本课程将手把手地教大家使用<span>labelImg</span>标注和使用<span>YOLOv4-tiny</span>训练自己数据集。课程实战分为两个项目:单目标检测足球目标检测和多目标检测足球和梅西同时检测。<span></span> </p> <p> <span> </span> </p> <p> 本课程<span>YOLOv4-tiny</span>使用<span>AlexAB/darknet</span>,在<span>Windows10</span>系统上做项目演示。包括:<span>YOLOv4-tiny</span>网络结构、安装<span>YOLOv4-tiny</span>、标注自己数据集、整理自己数据集、修改配置文件、训练自己数据集、测试训练出网络模型、性能统计<span>(mAP</span>计算<span>)</span>和先验框聚类分析。 <span> </span> </p> <p> <span> </span> </p> <p> 除本课程《<span>Windows</span>版<span>YOLOv4-tiny</span>目标检测实战:训练自己数据集》外,本人推出了有关<span>YOLOv4</span>目标检测系列课程。请持续关注该系列其它视频课程,包括:<span></span> </p> <p> 《<span>Windows</span>版<span>YOLOv4</span>目标检测实战:训练自己数据集》<span></span> </p> <p> 《<span>Windows</span>版<span>YOLOv4</span>目标检测实战:人脸口罩佩戴识别》<span></span> </p> <p> 《<span>Windows</span>版<span>YOLOv4</span>目标检测实战:中国交通标志识别》<span></span> </p> <p> 《<span>Windows</span>版<span>YOLOv4</span>目标检测:原理与源码解析》<span></span> </p> <p> <span> <img alt="" src="https://img-bss.csdnimg.cn/202007061503586145.jpg" /></span> </p> <p> <span><img alt="" src="https://img-bss.csdnimg.cn/202007061504169339.jpg" /><br /> </span> </p>
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页