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

TOP

嗯,看結果是蠻正常的,試試看 trace 原始碼囉~
To infinity and beyond!

TOP

本帖最後由 小煒 於 2010-9-6 14:14 編輯

版大您好

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

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


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

TOP

可以在client就判斷是何種檔案與檔案大小嗎?
50 字節以內
不支持自定義 Discuz! 代碼

TOP

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

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

  //送出
  return true;
}
第二個問題,你可以在用 php 寫入網頁內的 javascript,例如:
<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>  
或者是先設定到某個變數:
<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>  
To infinity and beyond!

TOP

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

阿對了,如果將程式應用在"編輯資料",也就是說,使用者上傳後,也送出表單了,日後的修改...
原來,放預設圖的欄位:
existImages: ''
請問,這個地方,我要放上使用者之前上傳的圖片的路徑與檔名,請問,該怎樣將值傳進去?
因為,我是用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'
但該如何將
<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>
變成
<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>
應該沒辦法直接用下面的方式這樣吧?
existImages: $user_data['pics']  
謝謝大大觀看問題..

TOP

嗯,一般的作法是在 form submit 前會做一些欄位檢查,這時候可以順便帶入這個值。
<form onsubmit="return checkForm()">
...
</form>
To infinity and beyond!

TOP

小弟不才,想說,使用者一定會將滑鼠移動到按鈕處(不管他要預覽或真的送出表單),於是,將取值判斷的動作,放在表單按鈕的那個表格TR之中,試了一下:
  <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>
結果,居然效果出奇的好耶!好像就不會有取不到值的事情發生了!
果然,一個人想,不如拿出來討論,這樣也會讓自己想的層面變多變廣了 ^^

或是,還有沒有其他更好的方式?請大大教導一下!謝謝。

TOP

謝謝大大回覆~

我發現我是如此取值的:
<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>
而sendPicName這隻副程式:
/*取得上傳的圖案檔名*/
function sendPicName(fm,el_name) {   
  document.getElementById(el_name).value = myImageUploader1.getFiles();
} 
因為使用的是onmouseout來判斷,難怪會出現這樣的問題,是吧?
不知道,大大有何判讀的建議?似乎 onmouseout 或 onmousemove 都有相同問題:滑鼠必須滑過預覽圖,才能正確取值...

TOP

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

TOP

返回列表 回復 發帖