jsGears.com 技術論壇 - AJAX, JavaScript, jQuery, 網站開發, 前端效能優化 » JavaScript 範例 » AJAX 多圖檔上傳範例 (使用 jquery core, jquery form)

donben 發表於 2009-12-1 16:56

這就可以啦！選擇圖片>>上傳>>圖片進資料夾>>圖檔檔名也儲存下來(A.JPG,B.JPG)
刪除圖片>>送出時將 myImageUploader1.getFiles() 的值一併送出>>server 端
[url=http://tainan.jseo.com.tw/][color=white]網站seo[/color][/url][url=http://tainan.jseo.com.tw/][color=white]seo行銷[/color][/url][url=http://tainan.jseo.com.tw/][color=white]seo排名[/color][/url][url=http://www.lla.com.tw/][color=white]卡債[/color][/url][url=http://www.lla.com.tw/][color=white]債務更生[/color][/url][url=http://www.lla.com.tw/][color=white]負債整合[/color][/url][url=http://www.lla.com.tw/][color=white]前置協商[/color][/url][url=http://www.lla.com.tw/][color=white]債務協商[/color][/url][url=http://www.pt-angel.com/][color=white]外拍模特兒[/color][/url][url=http://www.pt-angel.com/][color=white]金錢豹[/color][/url][url=http://www.pt-angel.com/][color=white]DIY[/color][/url][url=http://www.pt-angel.com/][color=white]保養品[/color][/url][url=http://www.pt-angel.com/][color=white]酒店兼職[/color][/url][url=http://www.huntswisswatch.com/][color=white]香腸禮盒[/color][/url][url=http://www.house99.tw/][color=white]辦公室裝潢[/color][/url][url=http://www.house99.tw/][color=white]店面裝潢[/color][/url][url=http://www.house99.tw/][color=white]豪宅裝潢[/color][/url]

rfy1119 發表於 2010-3-18 10:12

您好：
目前預覽圖的大小都是固定的
想請問一下有辦法依上傳圖檔的大小變標預覽圖的大小嗎
謝謝

wmh 發表於 2010-3-18 23:17

可以啊，縮圖是 server 端自行實做的。

sfreedom 發表於 2010-4-1 13:11

請問，如果要在預覽小圖，點X的時候，就實際刪除檔案，而不是等送出表單再作的話，請問要怎麼下手？

wmh 發表於 2010-4-3 10:02

[b]回復 [url=http://jsgears.com/redirect.php?goto=findpost&pid=1154&ptid=109]24#[/url] [i]sfreedom[/i] [/b]

這和原本設計的流程不一樣喔，如果真要這麼做，不太適合用這隻程式，會改很多，或需要重寫。

sfreedom 發表於 2010-4-9 21:37

謝謝您的回覆~
我想，刪檔，就先放一邊吧 ^^

另外，實際使用上，發現有個問題：
我預設是使用三張圖片，但時常送出表單後，第三張圖片是空的(也就是陣列的第三個元素沒有內容)，可是，實際圖片確實都有上傳了，也在伺服器都看到了。
換句話說，不管設定使用者可以上傳幾張，預覽都會正常，可是上傳的最後一張圖片的接收陣列，只要滑鼠沒滑過圖片，就時常會是空的....
不知道這是為什麼？

謝謝耐心的觀看問題 ^^

wmh 發表於 2010-4-9 22:23

如果在 client 端先把 myImageUploader1.getFiles() 的值 alert 出來看看呢？

sfreedom 發表於 2010-4-10 01:48

表單送出前，圖片上傳，預覽都沒問題，照您說的，在client端用 alert 看 myImageUploader1.getFiles() 的值，也都正確：[code]<input type="button" value="ALERT" onclick="var tt=myImageUploader1.getFiles();alert(tt);">[/code]因為 myImageUploader1.getFiles() 我是寫到 pics_name[] 裡面，所以表單接收頁的程式：[code]$pics_name = explode(",",$_POST['pics_name']); //圖片的檔
<div align="center"><img src=<? echo $pics_name[0]; ?> />　&nbsp;　<img src=<? echo $pics_name[1]; ?> />　&nbsp;　<img src=<? echo $pics_name[2]; ?> /></div>[/code]但送出表單後，$pics_name[2] 的值，也就是第三張圖(最後一張圖)，經常都是空值，現在發現，必須送出表單前，滑鼠要移過第三張(或是最後一張)預覽圖後，表單接受頁的 $pics_name[2] 才會有值.

謝謝大大回覆得如此迅速！

wmh 發表於 2010-4-10 11:51

嗯，我猜是你把 myImageUploader1.getFiles() 值寫到 pics_name[] 裡的問題，可以朝這部份檢查看看程式流程。

sfreedom 發表於 2010-4-10 12:38

謝謝大大回覆~

我發現我是如此取值的：[code]<div id="upload_block" onmouseout="return( sendPicName(form_mwo,'pics_name') );">
        <div id="preview_block"></div>
                <div style="clear: both;"><span id="image_input_block"></span></div>[/code]而sendPicName這隻副程式：[code]/*取得上傳的圖案檔名*/
function sendPicName(fm,el_name) {   
  document.getElementById(el_name).value = myImageUploader1.getFiles();
} [/code]因為使用的是onmouseout來判斷，難怪會出現這樣的問題，是吧？
不知道，大大有何判讀的建議？似乎 onmouseout 或 onmousemove 都有相同問題：滑鼠必須滑過預覽圖，才能正確取值...

sfreedom 發表於 2010-4-10 13:27

小弟不才，想說，使用者一定會將滑鼠移動到按鈕處(不管他要預覽或真的送出表單)，於是，將取值判斷的動作，放在表單按鈕的那個表格TR之中，試了一下：[code]  <tr onMouseOver="return( sendPicName('pics_name') )">
    <td colspan="4" align="center">
    <input type="hidden" name="form_action" id="form_action" value="mws">
                <input type="hidden" name="m_type" id="m_type" value="ws">
                <input type="hidden" name="pics_name" id="pics_name">
                <input type="submit" value="填好資料，送出註冊！" onclick="form_mws.action='registeration.php'; form_mws.target='_self';">
                <input type="button" value="註冊資料預覽！" onclick="form_mws.action='preview_regdata.php'; form_mws.target='_blank'; this.form.submit();">
        </td>
  </tr>[/code]結果，居然效果出奇的好耶！好像就不會有取不到值的事情發生了！
果然，一個人想，不如拿出來討論，這樣也會讓自己想的層面變多變廣了 ^^

或是，還有沒有其他更好的方式？請大大教導一下！謝謝。

wmh 發表於 2010-4-10 21:32

嗯，一般的作法是在 form submit 前會做一些欄位檢查，這時候可以順便帶入這個值。
[code html]
<form onsubmit="return checkForm()">
...
</form>
[/code]

sfreedom 發表於 2010-4-14 19:49

其實說要檢查表單，我都有檢查...
但是，比方說，最大上傳三張圖，但使用者只要上傳兩張，那我也不能硬要他塞三張阿.. XD

阿對了，如果將程式應用在"編輯資料"，也就是說，使用者上傳後，也送出表單了，日後的修改...
原來，放預設圖的欄位：[code]existImages: ''[/code]請問，這個地方，我要放上使用者之前上傳的圖片的路徑與檔名，請問，該怎樣將值傳進去？
因為，我是用php，但php與javascript是無法互相傳參數的不是嗎？
我可以讀出之前使用者送出表單後的資料，比方說，使用者最後我寫入資料庫的圖片資料欄位，內容是 'user/pic1.jpg,user/pic2.jpg,user/pic3.jpg'
我可以用php+mysql讀到某個陣列裡，比方說是$user_data['pics']，所以$user_data['pics']='user/pic1.jpg,user/pic2.jpg,user/pic3.jpg'
但該如何將[code]<script type="text/javascript">
$(function() {
  myImageUploader1 = new JSG.imgUploader({
    fileLimits: 3,
    actionUrl: 'store_pic_upload.php',
    inputContainer: 'image_input_block',
    previewContainer: 'preview_block',
    existImages: ''
  });
</script>[/code]變成[code]<script type="text/javascript">
$(function() {
  myImageUploader1 = new JSG.imgUploader({
    fileLimits: 3,
    actionUrl: 'store_pic_upload.php',
    inputContainer: 'image_input_block',
    previewContainer: 'preview_block',
    existImages: 'user/pic1.jpg,user/pic2.jpg,user/pic3.jpg'
  });
</script>
[/code]應該沒辦法直接用下面的方式這樣吧？[code]existImages: $user_data['pics']  [/code]謝謝大大觀看問題..

wmh 發表於 2010-4-16 00:45

第一個問題就是在欄位檢查「後」，表單送出「前」，再去把你的隱藏欄位做設定即可，例如：
[code js]
function checkForm() {
  //表單欄位檢查...
  ....

  //檢查至此都 ok，準備送出前先把圖檔列表存到隱藏欄位
  document.getElementById('pics_name').value = myImageUploader1.getFiles();

  //送出
  return true;
}
[/code]

第二個問題，你可以在用 php 寫入網頁內的 javascript，例如：
[code js]
<script type="text/javascript">  
$(function() {  
  myImageUploader1 = new JSG.imgUploader({  
    fileLimits: 3,  
    actionUrl: 'store_pic_upload.php',  
    inputContainer: 'image_input_block',  
    previewContainer: 'preview_block',  
    existImages: '<?php echo $user_data['pics']; ?>'
  });  
</script>  
[/code]

或者是先設定到某個變數：

[code js]
<script type="text/javascript">  
var existImages = '<?php echo $user_data['pics']; ?>';
...

$(function() {  
  myImageUploader1 = new JSG.imgUploader({  
    fileLimits: 3,  
    actionUrl: 'store_pic_upload.php',  
    inputContainer: 'image_input_block',  
    previewContainer: 'preview_block',  
    existImages:  existImages
  });  
</script>  
[/code]

_james 發表於 2010-8-18 12:15

可以在client就判斷是何種檔案與檔案大小嗎？

小煒 發表於 2010-9-6 14:12

[i=s] 本帖最後由 小煒 於 2010-9-6 14:14 編輯 [/i]

版大您好

小弟下載了範例,但測試上好像是有問題的
新上傳的圖檔會一直顯示上傳中的圖示
並沒有切換為預覽圖
使用Firebug 1.5.4 查看後,JSON的回傳值應該也是正確的(請看附圖連結)
查了兩天原因不得其解,希望版大可以提供協助
謝謝!!
PS:小弟套在自己寫的程式上,上傳圖檔到SERVER是正常,但是預覽圖仍然是不顯示,後來查看版大您提供的範例發現是一樣的情狀

小弟使用的環境為
jquery-1.4.2.min.js
----------->改為版大的 [url]http://ajax.googleapis.com/ajax/libs/jquery/1.2/jquery.min.js[/url] 一樣不行
jquery.form.js  (2.4.5版)
----------->改為版大的 2.12版 一樣不行
AppServ 2.5.10


附圖連結 in flickr
[url]http://www.flickr.com/photos/40548502@N02/4963038598/[/url]

wmh 發表於 2010-9-6 22:31

嗯，看結果是蠻正常的，試試看 trace 原始碼囉～

jaydarman 發表於 2010-9-22 14:41

如果 想把這個範例 應用到網頁上 該怎麼實做呢?
是要先下載什麼 還是要安裝什麼嗎?

itik1412 發表於 2010-10-5 18:20

版大 您好~  我是使用 DreamWeaver cs4 來編緝網頁的
   請問您的程式要如何套用到DW 上呢

itik1412 發表於 2010-10-6 19:28

版大您好，我是剛學做網頁的新手@@~
   我直接抓下範例做測試，但出現和 小煒 一樣的情況。
      另外 如果要在此範例加上 縮圖的功能要如何做修改呢
     謝謝您耐心看完 問

查看完整版本: AJAX 多圖檔上傳範例 (使用 jquery core, jquery form)