ขอคำแนะนำหน่อยครับ เรื่องการ preview รูปก่อน upload หลายๆรูปครับ

<center>
        <br/>
        <br/>
          <table width="70%" border="2px" id="tbExp" border-color:#c0c0c0 >
          <tr style="background: #0cadbe; color:#ffffff";>
            <td><div align="center"><label>รูปที่</div></td>
            <td><div align="center"><label>คำอธิบาย</label></div></td>
            <td><div align="center"><label>รูปภาพ</label></div></td>
            <td><div align="center"><label>ตัวอย่างภาพ</label></div></td>
            </tr>
          </table>
        <br/>

        <input type="hidden" name="hdnMaxLine" value="0">
          <button name="btnAdd" type="button" id="btnAdd" class="buton b_green-1 buton-4 buton-mini" onClick="CreateNewRow();">+</button>
          <button name="btnDel" type="button" id="btnDel" class="buton b_red buton-4 buton-mini" onClick="RemoveRow();">-</button>

              <br/><br/>

        </center>

<script language="JavaScript">
          function showPreview(ele)
            {
              var intLine = parseInt(document.frmMain.hdnMaxLine.value);
              intLine++;
              $('#imgAvatar').attr('src', ele.value); // for IE
                if (ele.files && ele.files[0]) {
            
                var reader = new FileReader();
                
                reader.onload = function (e) {
                    $('#imgAvatar').attr('src', e.target.result);
                }

                reader.readAsDataURL(ele.files[0]);
              }
            }
        </script>
        


        <script type="text/javascript">

        function CreateNewRow()
        {
          var intLine = parseInt(document.frmMain.hdnMaxLine.value);
          intLine++;
      
          var theTable = document.all.tbExp
          var newRow = theTable.insertRow(theTable.rows.length)
          newRow.id = newRow.uniqueID
    
          var item1 = 1
          var newCell
    
          //*** Column 1 ***//
          newCell = newRow.insertCell(0)
          newCell.id = newCell.uniqueID
          newCell.setAttribute("className", "css-name");
          newCell.innerHTML = "<center>"+intLine+"</center>"



          //*** Column 2 ***//
          newCell = newRow.insertCell(1)
          newCell.id = newCell.uniqueID
          newCell.setAttribute("className", "css-name");
          newCell.innerHTML = "<center><INPUT TYPE=\"TEXT\" size=\"60\" class=\"form-control input-sm\" style=\"width:100%\" NAME=\"Column2_"+intLine+"\" VALUE=\"\"></center>"   
    
          //*** Column 3 ***//
          newCell = newRow.insertCell(2)
          newCell.id = newCell.uniqueID
          newCell.setAttribute("className", "css-name");
          newCell.innerHTML = "<center><input type=\"file\" name=\"filUpload"+intLine+"\" id=\"file_upload\" OnChange=\"showPreview(this)\"></center>" 

          //*** Column 4 ***//
          newCell = newRow.insertCell(3)
          newCell.id = newCell.uniqueID
          newCell.setAttribute("className", "css-name");
          newCell.innerHTML = "<center><img id=\"imgAvatar\" width=\"100\" height=\"100\"></img></center>"    
    
          document.frmMain.hdnMaxLine.value = intLine;
        }
  
        function RemoveRow()
        {
          intLine = parseInt(document.frmMain.hdnMaxLine.value);
          if(parseInt(intLine) > 0)
          {
            theTable = (document.all) ? document.all.tbExp : 
            document.getElementById("tbExp")
            theTableBody = theTable.tBodies[0];
            theTableBody.deleteRow(intLine);
            intLine--;
            document.frmMain.hdnMaxLine.value = intLine;
          } 
        } 

      //////////////////////////
      </script>