• client 端 user 選取檔案後，透過 jquery form 同步即時上傳檔案
  
• server 端的程式接收到檔案並處理後，若成功則回傳檔名，失敗則回傳錯誤訊息
  
• client 端再根據回傳結果顯示訊息或處理圖檔預覽，並儲存已上傳成功的檔名
  
• client 端的  UI 可以讓 user 刪除已上傳的檔案
  
• 整個表單在送出前必須先確認是否仍有檔案正在上傳，若無，則可以取得已上傳成功的檔名再透過 hidden 的欄位 submit 給 server
  

<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>

• Line2: JSGImgPreview 是給預覽圖檔用的 CSS，您可以在此指定 width, height, border, background-color 等等。
  
• Line9: preview_block 是放預覽圖檔的地方
  
• Line11: image_input_block 是放上傳檔案輸入框的地方
  

<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>

$(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'
  });
});

• actionUrl: server 要處理上傳檔案的 url
  
• inputContainer: 放預覽圖檔的地方
  
• previewContainer: 放上傳檔案輸入框的地方
  

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
};

<?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);
?>

alert(myImageUploader1.isReady());

alert(myImageUploader1.getFiles());

<form onsubmit="return checkForm(this)">
<input type="hidden" name="pics" />

function checkForm(fm) {
  fm.elements['pics'].value = myImageUploader1.getFiles();
  //其他表單檢查...
}

echo json_encode(array('success' => 'http://example.com/img/xxx.jpg'));

<input type="button" value="ALERT" onclick="var tt=myImageUploader1.getFiles();alert(tt);">

$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>

<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>

/*取得上傳的圖案檔名*/
function sendPicName(fm,el_name) {   
  document.getElementById(el_name).value = myImageUploader1.getFiles();
} 

  <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>

<form onsubmit="return checkForm()">
...
</form>

existImages: ''

<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']  

function checkForm() {
  //表單欄位檢查...
  ....

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

  //送出
  return true;
}

<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>  

$(':input[@name=submit]', form).length