js實現上傳圖片之前判斷圖片格式，同時實現預覽，相容各種瀏覽器+下載

        最近在做圖片上傳的一個前台頁面，上傳圖片功能雖然很簡單，但是需要我們學習的地方很多。在上傳圖片之前驗證圖片的格式，並同時實現預覽。這篇部落格我們就用一段簡單的js代碼來實現驗證圖片格式，並同時預覽的功能。

html頁面

<div>    選擇圖片:<input id="idFile" style="width:224px" runat="server" name="pic" onchange="javascript:setImagePreview(this,localImag,preview);" type="file" /></div>    預　　覽:<div id="localImag">    <%--預覽，預設圖片--%>    <img id="preview" alt="預覽圖片" onclick="over(preview,divImage,imgbig);" src="img/5691.jpg" style="width: 400px; height: 400px;"/> </div>

js代碼

<script>    //檢查圖片的格式是否正確,同時實現預覽    function setImagePreview(obj, localImagId, imgObjPreview) {        var array = new Array('gif', 'jpeg', 'png', 'jpg', 'bmp'); //可以上傳的檔案類型        if (obj.value == '') {            $.messager.alert("讓選擇要上傳的圖片!");            return false;        }        else {            var fileContentType = obj.value.match(/^(.*)(\.)(.{1,8})$/)[3]; //這個檔案類型正則很有用             ////布爾型變數            var isExists = false;            //迴圈判斷圖片的格式是否正確            for (var i in array) {                if (fileContentType.toLowerCase() == array[i].toLowerCase()) {                    //圖片格式正確之後，根據瀏覽器的不同設定圖片的大小                    if (obj.files && obj.files[0]) {                        //Firefox下，直接設img屬性                         imgObjPreview.style.display = 'block';                        imgObjPreview.style.width = '400px';                        imgObjPreview.style.height = '400px';                        //Firefox7以上版本不能用上面的getAsDataURL()方式擷取，需要一下方式                         imgObjPreview.src = window.URL.createObjectURL(obj.files[0]);                    }                    else {                        //IE下，使用濾鏡                         obj.select();                        var imgSrc = document.selection.createRange().text;                        //必須設定初始大小                         localImagId.style.width = "400px";                        localImagId.style.height = "400px";                        //圖片異常的捕捉，防止使用者修改尾碼來偽造圖片                         try {                            localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";                            localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader=").src = imgSrc;                        }                        catch (e) {                            $.messager.alert("您上傳的圖片格式不正確，請重新選擇!");                            return false;                        }                        imgObjPreview.style.display = 'none';                        document.selection.empty();                    }                    isExists = true;                    return true;                }            }            if (isExists == false) {                $.messager.alert("上傳圖片類型不正確!");                return false;            }            return false;        }    }</script>

介面效果

                                               

       源碼下載

       http://download.csdn.net/detail/jiuqiyuliang/6889125

       js實現圖片上傳的功能很簡單，儘管還不是很完美，相信不斷的完善一定可以做的更好，希望大家提寶貴的建議。