ASP.NET JS本地图片预览问题~【高手】、【前辈】请进！

Question

我参照网上的代码的。目的是：JS控制点按钮生成HTML的file控件（点一下出现1个），然后浏览file控件，将浏览后的图片显示到DIV里（那个DIV的id="divShow"的那个，下面有。）
HTML部分
                                    <table id="target" border="1" width="500" height="20">
                                    <tr>
                                    <td id="Td0">
                                        <div id="divShow" style="FILTER:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);">
                                        </div>
                                    </td>
                                    </tr>
                                    </table>
JS部分
function FnImgChange(obj)
{
    var objImgPath = document.getElementById(obj.id);
    var objImg = document.getElementById("divShow");
    var img = objImgPath.value;    objImg.style.visibility = "hidden";
    objImg.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = img;
    objImg.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "image";
    
    //过一小会获取div的宽高.
    setTimeout("setImg()",100);
}
function setImg()
{
    var o = document.getElementById("divShow");
    
    var width_img;
    var height_img;    o.style.visibility = "visible";
    width_img=o.offsetWidth;
    height_img=o.offsetHeight;    var width=420;   //预定义宽，图片的宽度了
    var height=200; //预定义高，如果宽小于长度，那么他会自适应按照宽度来计算比例，所以对于一般情况长>宽的照片时候，这个参数没啥意义
    var ratW;        //宽的缩小比例
    var ratH;        //高的缩小比例
    var rat;         //实际使用的缩小比例
    if(width_img<width && height_img<height)
    {
        //如果比预定义的宽高小，原图显示。
         o.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "image";
        return;        
    }
    else
    {
        //如果大的化，要把 sizingMethod改成scale 如果属性是image,不管怎么改div的宽高，都不起作用
         o.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "scale";    }
    ratH = height/height_img;
    ratW = width/width_img;
    if(ratH<ratW)       //选择最小的作为实际的缩小比例
         rat=ratH;
    else
         rat=ratW;
        
    width_img = width_img * rat;
    height_img = height_img * rat;
    o.style.width = width_img;
    o.style.height = height_img;
}function newRow()
{
……………………………………………………………………………………………………………………
c1.innerHTML="<input type='file' style=\"width: 500px;\" id='"+i+"' onchange=\"FnImgChange(this)\" name='filecom'>"; 
……………………………………………………………………………………………………………………
}
}

Answer 1

<script language="javascript" type="text/javascript">   
  function PreviewImg(imgFile)   
  {   
  var newPreview = document.getElementById("newPreview");   
  newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value;   
  newPreview.style.width = "80px";   
  newPreview.style.height = "60px";   
  }   
  </script>   
<asp:FileUpload ID="FileUpload1" runat="server" onchange="PreviewImg(this)" />   
<div id="newPreview"> </div>   
function $(o){return document.getElementById(o);}   
function CheckImg(o,img)   
{   
  if (!/\.((jpg)|(bmp)|(gif)|(png))$/ig.test(o.value))   
  {   
  alert('只能上传jpg,bmp,gif,png格式图片!');   
  o.outerHTML = o.outerHTML;   
  }   
  else   
  {   
  $(img).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src=o.value;   
  }   
}   <asp:FileUpload ID="FileUpload1" runat="server" onchange="CheckImg(this, 'img');" />   
<div id="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src= <%= pic%>,sizingMethod=scale);width:88px;height:113px;"> </div>   
public string pic=""; 

Answer 2

   <input type="text" tagfff='1' id="productImage1" name="productImage1" readonly="readonly" size="60" maxlength="100" />
                            <span aindex="1" onclick="TriggerUpload(this);" style="cursor: hand; cursor: pointer">上传图片</span> 
                            <span bindex="1" onclick='addFile(this);' style="cursor: hand; cursor: pointer">新增</span><br />
                            <input type="hidden" name='imageLength' id='imageLength' value='0' />
                             <input type="hidden" id="imginfo1" name="imginfo1" />function addFile(obj) {
                                var i = (parseInt(obj.getAttribute("bindex")) + 1);
                                if (i < 5) {
                                    var jjj = $("#imageDivLeft");
                                    jjj.css("height", parseInt(jjj.css("height")) + 40);
                                    if (i != 4)
                                        $("#imageDiv").append('<input tagfff="1" type="text" readonly="readonly" id="productImage' + i + '"  name="productImage' + i + '" size="60" maxlength="100"/><span aindex="' + i + '" onclick="TriggerUpload(this);" style="cursor: hand; cursor: pointer">上传图片</span>  <span onclick="addFile(this);"  bindex="' + i + '" style="cursor: hand; cursor: pointer">新增</span><br />');
                                    else
                                        $("#imageDiv").append('<input type="text" readonly="readonly" id="productImage' + i + '" name="productImage' + i + '" size="60" maxlength="100"/><span aindex="' + i + '" onclick="TriggerUpload(this);" style="cursor: hand; cursor: pointer">上传图片</span><br />');
                                    $("#imageInfoDiv").append('<input type="hidden" id="imginfo' + i + '"  name="imginfo' + i + '" />');
                                    obj.parentNode.removeChild(obj);
                                }
                                else {
                                    alert("最多能上传4张图片");
                                }
                            }直接append，因为在后台是可以用postfile获取的

Answer 3

http://topic.csdn.net/u/20100910/18/0c28f8d3-f552-4e13-825b-50dd35d65c17.html