Javascript實現圖片上傳

html代碼：

View Code

　<img id="comImg" class="pp" runat="server" alt="預覽" onclick="ShowUp2();" width="100"
                                            height="100" style="display: none;" />
<div id="comImg_fake" class="pp" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
                                            cursor: pointer; background: url(images/waitpic.gif); width: 100px; height: 100px;"
                                            onclick="ShowUp();">
</div>

　　　　　　　　　　　　　

Javascript代碼：

View Code

 <script type="text/javascript">
function pSelect() {//彈出選擇視窗
            window.open('selectTest.aspx', 'select', 'height=500, width=500, top=200, left=200, toolbar=no,menubar=no, scrollbars=no, resizable=no, status=no,location=no');
        }
function ShowUp() {

//  var h = document.getElementById("form1").style.height;
            document.getElementById('upmain').style.display = 'block';
            document.getElementById('upload').style.display = 'block';
            document.getElementById("upload").style.left = (document.body.clientWidth - 250) / 2 + "px";
//  document.getElementById("upload").style.top = (parseInt(h.substr(0, h.IndexOf('px'))) - 80) / 2 + "px";
            //alert(document.getElementById("upload").style.top);
        }
function ShowUp2() {
            document.getElementById('comImg_fake').style.display = 'none';
            document.getElementById('comImg').style.display = 'block';

            ShowUp();
        }
function CloseUp() {
            document.getElementById('upmain').style.display = 'none';
            document.getElementById('upload').style.display = 'none';
        }
function GetPreview() {
if (CheckFormat()) {
                document.getElementById('comImg').style.display = 'none';
                document.getElementById("comImg_fake").style.background = "none";
try {
                    document.getElementById("comImg_fake").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.getElementById("selectedfile").value;
                    CloseUp();
                } catch (e) { alert("檔案損壞或非法！"); alert(e); }

            } else
                alert("目前只支援格式為：\"jpg\"、\"bmp\"、\"tiff\"、\"gif\"、\"tga\"、\"jpeg\"、\"png\"的圖片檔案！");
        }
function CheckFormat() {
var obj = document.getElementById("selectedfile").value;
var obj = obj.substr(obj.lastIndexOf('.') + 1).toLowerCase();
return (obj == "jpg" || obj == "bmp" || obj == "gif" || obj == "jpeg" || obj == "png");
        }
function ShowImg() {

            document.getElementById("comImg").style.display = "block";
            document.getElementById("comImg_fake").style.display = "none";
        }
</script>

作者：記憶逝去的青春
出處：http://www.cnblogs.com/lukun/
本文著作權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文串連，如有問題，可以通過http://www.cnblogs.com/lukun/  聯絡我，非常感謝。