开发学院服务器云计算 Perl 和 Amazon 云，第 5 部分：了解完整 mod_per... 阅读

Perl 和 Amazon 云，第 5 部分：了解完整 mod_perl 站点的模板

　2010-02-04 00:00:00　来源：WEB开发网　　　

核心提示： upload.tmpl现在，我们将了解一个优秀的模板，Perl 和 Amazon 云，第 5 部分：了解完整 mod_perl 站点的模板(2)，它集合了 JavaScript、HTML 和 Template Toolkit 语言，如果这还不能让 Web 设计师激动不已的话

upload.tmpl

现在，我们将了解一个优秀的模板，它集合了 JavaScript、HTML 和 Template Toolkit 语言。如果这还不能让 Web 设计师激动不已的话，那么我不知道还有什么能够拥有这种魔力。

清单 2. 足以让 Web 设计人员激动不已的 upload.tmpl

<html>　　<head>　　　<title>Upload　Page　For　[%　username　%]</title>　　　<meta　http-equiv="Content-Type"　content="text/html;　charset=UTF-8"　/>　　　<script　src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js"　　　　　　　　　　type="text/javascript"></script>　　</head>　　　<body>　　<script　language="JavaScript">　 function　OnSubmitForm()　 {　　var　form　=　$('uploader');　　var　file　=　form['file'];　　var　ct　　=　form['Content-Type'];　　var　name　=　form['name'].value;　　　if　(!name　||　name.length　<　1)　　{　　alert("Sorry,　you　can't　upload　without　a　name.");　　return　false;　　}　　　var　filename　=　''+$F(file);　　var　f　=　filename.toLowerCase();　//　always　compare　against　the　lowercase　version　　　if　(!navigator['mimeTypes'])　　{　　alert("Sorry,　your　browser　can't　tell　us　what　type　of　file　you're　uploading.");　　return　false;　　}　　　var　type　=　$A(navigator.mimeTypes).detect(function(m)　　{　　//　does　any　of　the　suffixes　match?　　return　m.type.length　>　3　&&　m.type.match('/')　&&　　　$A(m.suffixes.split(',')).detect(function(suffix)　　{　　　return　f.match('\.'　+　suffix.toLowerCase()　+　'$');　　});　　});　　　if　(!type　||　!type['type'])　　{　　type　=　{　type　:　prompt("Enter　your　own　MIME　type,　we　couldn't　find　one　through　　　　　　　　　　　　　　the　browser",　"image/jpeg")　};　　}　　　if　(type　&&　type['type'])　　{　　ct.value　=　type.type;　　　//　fix　up　the　redirect　if　we're　about　to　submit　　var　sar　=　form['success_action_redirect'];　　　sar.value　=　sar.value　+　escape(name);　　return　true;　　}　　　alert("Sorry,　we　don't　know　the　type　for　file　"　+　filename);　　return　false;　 }　 </script>　 <h1>Hi,　[%　username　%]</h1>　　　<form　id="uploader"　action="https://images.share.lifelogs.com.s3.amazonaws.com/"　　　　　　method="post"　enctype="multipart/form-data"　>　　　　<input　type="hidden"　name="key"　value="${filename}">　　　　<input　type="hidden"　name="AWSAccessKeyId"　value="[%　env.AWS_KEY　%]">　　　　<input　type="hidden"　name="acl"　value="public-read">　　　　<input　type="hidden"　name="success_action_redirect"　　　　　　　　value="http://share.lifelogs.com/s3uploaded?user=[%　username　%]&name=">　　　　<input　type="hidden"　name="policy"　value="[%　policy　%]">　　　　<input　type="hidden"　name="Content-Type"　value="image/jpeg">　　　　<input　type="hidden"　name="signature"　value="[%　signature　%]">　　　　Select　File　to　upload　to　S3:　　　　<input　name="file"　type="file">　　　　<br>　　　　Enter　a　Name:　　　　<input　name="name"　type="text">　　　　<br>　　　　<input　type="submit"　value="Upload　File　to　S3">　　　</form>　　　<form　id="adder"　action="/urluploaded"　method="post"　enctype="multipart/form-data">　　　　<input　type="hidden"　name="user"　value="[%　username　%]">　　　　Enter　a　URL:　　　　<input　name="url"　type="text">　　　　<br>　　　　Enter　a　Name:　　　　<input　name="name"　type="text">　　　　<br>　　　　<input　type="submit"　value="Add　URL">　　　</form>　　</body>　 </html>　