阿蒙大，不才後進有個問題望請賜教
1 view
Skip to first unread message
Derek Dai
Jun 9, 2008, 6:37:03 AM6/9/08
to AskHoamon
阿蒙大：
我是Derek，目前正在被一個小功能所苦，在找了網上資源後一直沒能得到解答，此功能著實困擾我許久，希望阿蒙大指點迷津~~~~
問題描述：
我目前完成讓使用者能照片上傳，另我也透過PIL使其產生 Thumbnail。不過我希望能讓使用者在上傳後但未按下Submit 前，
先預覽縮圖出來效果是否滿意。而不是在未看見縮圖Submit後發現不滿意，又再重新上傳.....這對使用者不太friendly。
不才小弟目前想到兩種表達方式，一是在「Submit」旁另加上「預覽」button，按下後顯示一簡單的視窗來預覽；另一是以ajax方
式在input type="file"標籤後面 (或該頁的其他處...) 加一iframe 或 div來預覽上傳後的縮圖。
在網海中找了許久還是沒找著此功能相關參考，還望阿蒙大能不吝給予指教，感激不盡啊~~~
Best Regards
Derek
我是Derek，目前正在被一個小功能所苦，在找了網上資源後一直沒能得到解答，此功能著實困擾我許久，希望阿蒙大指點迷津~~~~
問題描述：
我目前完成讓使用者能照片上傳，另我也透過PIL使其產生 Thumbnail。不過我希望能讓使用者在上傳後但未按下Submit 前，
先預覽縮圖出來效果是否滿意。而不是在未看見縮圖Submit後發現不滿意，又再重新上傳.....這對使用者不太friendly。
不才小弟目前想到兩種表達方式，一是在「Submit」旁另加上「預覽」button，按下後顯示一簡單的視窗來預覽；另一是以ajax方
式在input type="file"標籤後面 (或該頁的其他處...) 加一iframe 或 div來預覽上傳後的縮圖。
在網海中找了許久還是沒找著此功能相關參考，還望阿蒙大能不吝給予指教，感激不盡啊~~~
Best Regards
Derek
阿蒙
Jun 9, 2008, 12:15:50 PM6/9/08
to AskHoamon
這個問題非常高級，我本身也沒作過。
但以我所懂的 http + html 『基本原理』來看，這只能透過 AJAX 技術，當使用者選擇完檔案(但未按下submit前)時，可透過
onChange 的事件驅動，作 AJAX 上傳，成功後更新縮圖欄。但缺點是：『圖片已被上傳』了。
如果你有找到更好的解法，也請你告知。
但以我所懂的 http + html 『基本原理』來看，這只能透過 AJAX 技術，當使用者選擇完檔案(但未按下submit前)時，可透過
onChange 的事件驅動，作 AJAX 上傳，成功後更新縮圖欄。但缺點是：『圖片已被上傳』了。
如果你有找到更好的解法，也請你告知。
Derek Dai
Jun 14, 2008, 3:52:33 AM6/14/08
to askh...@googlegroups.com
Hi 阿蒙大,
感謝您的回覆，再搜尋網上資料後，似乎找到了一個不錯的參考內容；
附上網址：http://copyzhu.blogbus.com/logs/7730291.html
在試了原著的程式後，發現 img 無法顯示，初步認為是因為我的Djagno顯示靜態檔案是用
django.views.static.serve來執行，故要顯示的檔案都必須放在我設定的document_root才行，如此img 的
src也才能trace，但上傳縮圖即時顯示是在未按下submit前，圖片應該是無法存在我們後台(或是我設定的document_root中)才
是！？
我將img src的問題寫信詢問原著(雖然沒提我是用Django)，然對方似乎認為即時顯示圖片跟img 的 src是無關的；對此我有些
困惑，還是說是不是因為Django的關係，這支程式才沒辦法run......？
阿蒙大，祈求您給我個方向，感激不盡。
Best Regards
Derek
感謝您的回覆，再搜尋網上資料後，似乎找到了一個不錯的參考內容；
附上網址：http://copyzhu.blogbus.com/logs/7730291.html
在試了原著的程式後，發現 img 無法顯示，初步認為是因為我的Djagno顯示靜態檔案是用
django.views.static.serve來執行，故要顯示的檔案都必須放在我設定的document_root才行，如此img 的
src也才能trace，但上傳縮圖即時顯示是在未按下submit前，圖片應該是無法存在我們後台(或是我設定的document_root中)才
是！？
我將img src的問題寫信詢問原著(雖然沒提我是用Django)，然對方似乎認為即時顯示圖片跟img 的 src是無關的；對此我有些
困惑，還是說是不是因為Django的關係，這支程式才沒辦法run......？
阿蒙大，祈求您給我個方向，感激不盡。
Best Regards
Derek
阿蒙
Jun 22, 2008, 10:42:17 AM6/22/08
to AskHoamon
經""" 版权声明：转载时请以超链接形式标明文章原始出处和作者信息及本声明
http://copyzhu.blogbus.com/logs/7730291.html """的提示。
我要把他的範例修改如下。但還是有一個問題未能克服，那就是 javascript 在抓 input 標籤的 value 時，居然不包含目錄。這情
況得再找找如何處理。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8"/>
<title>图片上传</title>
<script type="text/javascript" language="javascript">
function viewmypic(mypic, imgfile)
{
if (imgfile.value)
{
mypic.src='file:///home/hoamon/'+imgfile.value; //你把
file:///home/hoamon/ 換成你上傳照片的目錄
mypic.style.display="";
mypic.border=1;
}
}
</script>
</head>
<body>
<center>
<form runat="server" id="Form1" >
<input name="imgfile" type="file" value='' id="imgfile" size="40"
onchange="viewmypic(showimg, this.form.imgfile);" />
<br />
</form>
<img name="showimg" id="showimg" src=""
style="display:none;cursor:hand;width:60px;height:60px" alt="缩略图预览" />
<!--讓圖在本機端即能顯示縮圖的重點，就在於 img 標籤內 src 屬性要能設成 file:///xxx/yyy/your_pic.png
-->
<br />
<div style="display:none">
</div>
</center>
</body>
</html>
http://copyzhu.blogbus.com/logs/7730291.html """的提示。
我要把他的範例修改如下。但還是有一個問題未能克服，那就是 javascript 在抓 input 標籤的 value 時，居然不包含目錄。這情
況得再找找如何處理。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8"/>
<title>图片上传</title>
<script type="text/javascript" language="javascript">
function viewmypic(mypic, imgfile)
{
if (imgfile.value)
{
mypic.src='file:///home/hoamon/'+imgfile.value; //你把
file:///home/hoamon/ 換成你上傳照片的目錄
mypic.style.display="";
mypic.border=1;
}
}
</script>
</head>
<body>
<center>
<form runat="server" id="Form1" >
<input name="imgfile" type="file" value='' id="imgfile" size="40"
onchange="viewmypic(showimg, this.form.imgfile);" />
<br />
</form>
<img name="showimg" id="showimg" src=""
style="display:none;cursor:hand;width:60px;height:60px" alt="缩略图预览" />
<!--讓圖在本機端即能顯示縮圖的重點，就在於 img 標籤內 src 屬性要能設成 file:///xxx/yyy/your_pic.png
-->
<br />
<div style="display:none">
</div>
</center>
</body>
</html>
Reply all
Reply to author
Forward
0 new messages