AJAX 多圖檔上傳範例 (使用 jquery core, jquery form)
[table=98%][tr][td][color=Red]2009-05-16 更新為 v1.1 版[/color][/td][/tr][/table][jsg.example]
<style type="text/css">
#upload_block {border: 5px solid #FFB300; width: 550px; height: 260px; position: relative;}
#upload_block h2 {background-color: #FFE097; margin-top: 0;}
#upload_block .info {background-color: #FFE9B7; width: 100%; position: absolute; bottom: 0;}
.JSGImgPreview {float: left; background: url() no-repeat center 50% #FFFAD9; width: 160px; height: 120px; border: solid 1px #0080FF; margin: 0 5px;}
</style>
<div id="upload_block">
<h2>圖檔上傳測試區，可上傳 4 張圖</h2>
<div id="preview_block"></div>
<div style="clear: both;">
<span id="image_input_block"></span>
</div>
<div class="info">
已上傳完成：<span id="infoIsReady"></span><br/>
已上傳檔案：<span id="infoFiles"></span><br/>
<font color="red">PS. 請隨意選取檔案上傳，此範例程式並不會真的處理上傳的圖檔</font>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2/jquery.min.js"></script>
<script type="text/javascript" src="_lib/jquery/plugins/jquery.form.js"></script>
<script type="text/javascript" src="_lib/jsg/JSG.ImageUploader.js"></script>
<script type="text/javascript">
$j = jQuery.noConflict();
$j(function() {
myImageUploader1 = new JSG.imgUploader({
fileLimits: 4,
actionUrl: '_lib/jsg/demo_upload.php',
inputContainer: 'image_input_block',
previewContainer: 'preview_block',
loadingIcon: '_lib/jsg/images/loading_indicator_big.gif',
deleteIcon: '_lib/jsg/images/icon_delete.gif',
existImages: '_lib/jsg/images/sample1.jpg,_lib/jsg/images/sample2.jpg'
});
setInterval(function() {
$j('#infoIsReady').html(myImageUploader1.isReady().toString());
$j('#infoFiles').html(myImageUploader1.getFiles().replace(/_lib\\/jsg\\/images\\//ig, ''));
}, 200);
});
</script>
[/jsg.example]
[size=4][color=Blue][原始檔及範例程式下載][/color][/size]
[img]http://jsgears.com/_icons/famfamfam/folder.gif[/img] 繁體中文版：[url=http://jsgears.com/_lib/jsg/JSG.ImageUploader.zh-tw.zip]JSG.ImageUploader.zh-tw.zip[/url]
[img]http://jsgears.com/_icons/famfamfam/folder.gif[/img] 簡體中文版：[url=http://jsgears.com/_lib/jsg/JSG.ImageUploader.zh-cn.zip]JSG.ImageUploader.zh-cn.zip[/url]
此外，這個程式用到了 jquery core 和 jquery form：
[img]http://jsgears.com/_icons/famfamfam/icon_home.gif[/img] [url]http://jquery.com/[/url]
[img]http://jsgears.com/_icons/famfamfam/icon_home.gif[/img] [url]http://www.malsup.com/jquery/form/[/url]
[size=4][color=Blue][原理說明][/color][/size]
[list=1]
[*]client 端 user 選取檔案後，透過 jquery form 同步即時上傳檔案
[*]server 端的程式接收到檔案並處理後，若成功則回傳檔名，失敗則回傳錯誤訊息
[*]client 端再根據回傳結果顯示訊息或處理圖檔預覽，並儲存已上傳成功的檔名
[*]client 端的 UI 可以讓 user 刪除已上傳的檔案
[*]整個表單在送出前必須先確認是否仍有檔案正在上傳，若無，則可以取得已上傳成功的檔名再透過 hidden 的欄位 submit 給 server
[/list]
[size=4][color=Blue][實作範例解說][/color][/size]
HTML 的部份：
[code html]
<style type="text/css">
.JSGImgPreview {
float: left; background: url() no-repeat center 50% #FFFAD9;
width: 160px; height: 120px; border: solid 1px #0080FF; margin: 0 5px;
}
</style>
<div id="upload_block">
<h2>圖檔上傳測試區，可上傳 4 張圖</h2>
<div id="preview_block"></div>
<div style="clear: both;">
<span id="image_input_block"></span>
</div>
</div>
[/code]
[list]
[*][b]Line2: [/b]JSGImgPreview 是給預覽圖檔用的 CSS，您可以在此指定 width, height, border, background-color 等等。
[*][b]Line9: [/b]preview_block 是放預覽圖檔的地方
[*][b]Line11: [/b]image_input_block 是放上傳檔案輸入框的地方
[/list]
引用 JavaScript：
[code html]
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript" src="JSG.ImageUploader.js"></script>
[/code]
共三個檔案，jquery core、jquery form 以及 JSG.ImageUploader.js
JavaScript 的部份如下：
[code js]
$(function() {
myImageUploader1 = new JSG.imgUploader({
fileLimits: 4,
actionUrl: 'demo_upload.php',
inputContainer: 'image_input_block',
previewContainer: 'preview_block',
existImages: '_lib/jsg/images/sample1.jpg,_lib/jsg/images/sample2.jpg'
});
});
[/code]
client 端的程式相當簡單，在 DOM Ready 事件內透過 new JSG.imgUploader() 建立上傳檔案的 UI，需傳入的必要參數為：
[list]
[*][b]actionUrl: [/b]server 要處理上傳檔案的 url
[*][b]inputContainer: [/b]放預覽圖檔的地方
[*][b]previewContainer: [/b]放上傳檔案輸入框的地方
[/list]
此外，還有其他額外的參數可以設定，請直接看以下的程式及相關說明：
[code js]
var defConfig = {
fileLimits: 1, //圖檔數量的限制 (-1 是不限制)
actionUrl: null, //圖檔上傳的處理程式
fileInputName: 'myfile', //檔案輸入框的名稱
inputContainer: null, //檔案輸入框的放置位置
previewContainer: null, //預覽圖檔的放置位置
hideInputIfReachLimits: true, //達到檔案數量限制時是否隱藏輸入框，若否，則採用 disable
confirmDeleteMsg: '確認刪除?',
previewClass: 'JSGImgPreview',
elementPrefix: 'JSGImgUploader',
loadingIcon: 'images/loading_indicator_big.gif',
deleteIcon: 'images/icon_delete.gif',
outputDelimiter: ',', //1.1版後改為半形逗號
existImages: '', //1.1版後新增，可以放預設圖檔(已存在伺服器的圖檔)
uniqueId: null
};
[/code]
至於 Server 端的程式(demo_upload.php)，則要處理上傳檔案，可能需要判斷檔案大小、先以暫存目錄存放，並處理縮圖等等。處理完成後以 JSON 格式回傳結果，若成功則回傳檔名，若失敗則回傳錯誤訊息，以下是 Server 端的回傳範例：
[code php]
<?php
/*
* 這個檔案需處理上傳並且回傳訊息給 client 端
* 1. 成功時回傳檔名，格式如下：
* {'success': 'filename.jpg'}
* 2. 失敗時回傳錯誤訊息：
* {'error': 'error message'}
*/
//隨機回傳成功或失敗
if (mt_rand(1, 3) != 1) {
//成功時回傳處理過後的檔名
$random = rand(1, 5);
$rtn = array('success' => 'images/sample'. $random .'.jpg');
} else {
//失敗時回傳錯誤訊息
$rtn = array('error' => 'upload file too big or something!');
}
echo json_encode($rtn);
?>
[/code]
最後，當整個表單要送出前，需要先判斷是否仍有檔案上傳中，可透過 myImageUploader1.isReady() 來判斷是否檔案已傳送完畢：
[code js]
alert(myImageUploader1.isReady());
[/code]
若檔案已傳送完畢，可再透過 myImageUploader1.getFiles() 取得已上傳成功的檔案名稱，若有多個檔案，則預設以逗號 , 相隔。
[code js]
alert(myImageUploader1.getFiles());
[/code]
至於上傳後，Server 端需要再有機制來驗證並處理先前上傳的暫存檔等等，這部份的實作就要看實際運用的情況，不包含在本範例中，請大家自己玩玩囉。 那請問，如果有預設值的話，就是從server端取出檔名，那我該怎麼做才能把檔名和圖片弄進去？ 不好意思，目前這個版本有點舊了，沒有提供預設值的功能，我晚一點把新版本放上來。
回復 2# 的帖子
fileInputName: 'myfile' <---這是預設的接收就用$_FILES['myfile'] 變數
不知道您是不是問這個? 版本升級為 v1.1 了，多了一個參數 existImages 可以設定預設的圖檔，多個圖檔則以半形逗號分隔。
回覆 darklit ：
btons 指的應該是當資料編輯時，Server 端已存在之前上傳的圖檔，這時應該要先顯示出來。 此範例說明的不清不楚,伺服器端接收的DEMO程式簡直是開玩笑 這個範例很經典，以前要做到動態上傳，需要動很大的手腳
不然就是以flash來代替。
個人覺得，這篇的重點是在jQuery的應用，並不是在PHP等
後端程式的操作。
所以範例中，並沒有真正去處理檔案的接收，僅以簡單的回
傳結果代替。
有點卡關...
我想..上傳我是解決了..可是刪除檔案呢ˊˋ?
上面X的部分可以內含傳送質嗎??
現在有點卡到...狀況是...選擇圖片>>上傳>>圖片進資料夾OK!!
刪除圖片>>在使用者介面上..是刪除了...可是...資料夾裡面的圖片還在ˊˋ
...請問他能附加另外一之程式在裡面嗎??例如在哪邊加入...actionUrl:??
這支程式很庫@@!
這兩天番遍了大小網站...
只有他沒有用FLASH@@!
感謝版大的無私分享這程式...不然我擠破頭都想不出來....:'(
回復 8# 的帖子
關於刪除圖片的部份，可以這樣做：選擇圖片>>上傳>>圖片進資料夾>>圖檔檔名也儲存下來(A.JPG,B.JPG)
刪除圖片>>送出時將 myImageUploader1.getFiles() 的值一併送出>>server 端比對剩下的檔案即可得知哪些是刪除的 我現在將...上傳圖片的檔名轉成JSON
那刪除的時候是將JSON檔名叫出來嘛??
那我該在哪邊加入myImageUploader1.getFiles() ??
是在JSG.ImageUploader.js的var $deleteIcon.click(function()裡面ㄇ??
麻煩版大幫我解題了....
我是自學的所以JAVA很差ˊˋ
辛苦了ˊˋ...
回復 10# 的帖子
得看你的實做流程喔。這個範例在我原本的想法中，只是一個表單內負責圖片的一小部份，會在原本的表單送出前，先將 myImageUploader1.getFiles() 存放到一個 hidden 的欄位後送出。如果你單純用這個程式來上傳圖片的話，得再想想在哪個時機把 myImageUploader1.getFiles() 的資料送到 server 端比較適合。 那版大的設計應該是屬於
檔案選擇>>圖片>>資料夾>>傳送json
刪除檔案>>取消瀏覽>>傳送json並且在裡面副加刪除檔案的程式
是這樣嗎:o ...
那我可以在x<<裡面附加 hidden 的欄位然後再按下他之後傳送到後端並重新更新json嗎???
因為我在想版大當初設計時應該在x<裡面附加了些什麼...讓使用者按下後圖片會消失@@
整理一下.....
可以請問版大x所傳送的值是哪一個變數?還是標籤??(抱歉我不太懂..那應該叫啥..ˊˋ)
感謝版大...ˊˋ:D 不是喔，我原始的設計是個 library 的形式給其他人套用，你不用修改到我提供的 JavaScript，所以不需要瞭解內部運作流程，也不用修改 X 的按鈕的動作。
這個 library 會協助你作圖檔的上傳，並且提供你訊息說 UI 的操作後有哪些檔案，你在最後整個表單送出時，同時將這個訊息送到 server 端處理即可。
我想你可能會需要另一個按鈕，讓 user 做「完成編輯」這樣的動作，在這個按鈕按下後再將訊息送到 server 端。 又有問題了...ˊˋ
如何將myImageUploader1.getFiles() 的值放進hidden 欄位@@?
那我現在就變成
選擇檔案>>檔案存入資料夾(先將檔案複製到資料夾內)
確認檔案>>送出myImageUploader1.getFiles()的值在去比對如果值裡面沒有那個檔案就將檔案刪除?
流程應該是這樣嗎??
麻煩版大幫我解迷了ˊˋ!! 你可以在表單送出前在 onsubmit 事件內去做
[code html]
<form onsubmit="return checkForm(this)">
<input type="hidden" name="pics" />
[/code]
[code js]
function checkForm(fm) {
fm.elements['pics'].value = myImageUploader1.getFiles();
//其他表單檢查...
}
[/code] 您好,
請問
我上傳都很順利,這是很好用的一個東西
但我如果在同個後端程式中縮圖
前端的預覽圖及無法顯示,且狀態一直是上傳中...
我試著調整縮圖程式的位置
不管是在$_FILES['myfile']['tmp_name']占暫存檔時先縮好
或是在移動好圖檔後再縮
資料夾都可看到縮好的圖片
但我遇到的情況依然存在...
我再試 GD縮或easyphpthumbnail.class縮
情況依然存在
所以縮圖是沒問題的
但這情況確時是因縮圖而引起的
請問有沒有解決之道呢?
謝謝 請用 client 端開發工具檢查 server 回應的格式是否正確。
正確的回應應該是一組 JSON 的字串如下：
[code php]
echo json_encode(array('success' => 'http://example.com/img/xxx.jpg'));
[/code] 請問你指定client端的開發工具是指哪些?
我想簡單的判斷就知道格式是不正確的
做個小驗證
我把json_encode就指向一張固定存在的圖
且都放在後端程式的底部echo
echo json_encode(array('success' => "http://l.yimg.com/fr/ng/ta/autonet/20081126/16/1417054021.jpg"));
用firebug來看
未縮圖時 上傳
不管傳何圖 在那預覽圖容器中的bg img都會顯示這張圖 這是預期中的
而進行縮圖時
不管我怎麼縮 都不關這張圖的事 應該都還是會顯示遠端的這張圖
但該容器中卻一直是loading.gif...
底部要傳送的東西都一樣
echo json_encode(array('success' => "http://l.yimg.com/fr/ng/ta/autonet/20081126/16/1417054021.jpg"));
請問你有遇過這個問題嗎? 如果有安裝 firebug，可以看看由 server 回傳的結果是否為正確的 json 格式，如下圖：
[img]http://img689.imageshack.us/img689/9792/jsgimgupload.png[/img]
或是直接逐行偵錯，也可以看到哪裡出了問題。
很可能是 server 端有回應其他錯誤訊息，導致整個格式錯誤了。 謝謝你的耐心協助
後來發現原來是縮圖中用了header
產生了錯誤
所以才會看不到返回錯的訊息
但圖也縮成功