上图片预览前端脚本

来源：互联网发布：十大网络主播投票编辑：程序博客网时间：2024/04/30 19:59
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head><body><script type="text/javascript">function setImagePreview() {var docObj=document.getElementById("personPhoto"); //$(docObj).valid(); var docObjButton=document.getElementById("personPhotoButton");//$(docObjButton).valid();    var imgObjPreview=document.getElementById("id_img_pers");    if(docObj.files && docObj.files[0])    {    var fileTypeArr = docObj.value.split('.');    var fileType = fileTypeArr[fileTypeArr.length-1];if(fileType != null){fileType = fileType.toLowerCase();if(fileType =='jpg' || fileType =='jpeg' || fileType =='gif' || fileType =='png' || fileType == 'bmp'){//火狐下，直接设img属性imgObjPreview.style.display = 'block';imgObjPreview.style.width = '120px';imgObjPreview.style.height = '140px';                    //imgObjPreview.src = docObj.files[0].getAsDataURL();//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式  imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);}}    }    else    {     //IE下，使用滤镜        docObj.select();        var imgSrc = document.selection.createRange().text;        var localImagId = document.getElementById("localImag");      //必须设置初始大小        localImagId.style.width = "120px";        localImagId.style.height = "140px";      //图片异常的捕捉，防止用户修改后缀来伪造图片try        {             localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";             localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;        }        catch(e)        {             jAlert("${pers_person_msg3}","");             return false;        }        imgObjPreview.style.display = 'none';        document.selection.empty();     }     return true;}</script><body><img id="id_img_pers" style="" width="120px" height="140px" src=""/>    <div style="display:none;"><input id="personPhoto"  name="personPhoto" type="file" accept="image/gif, image/jpeg,image/jpg,image/png,image/bmp"  style="width:68px; cursor:pointer;"  onchange="javascript:setImagePreview();"/></div><input id="personPhotoButton" value="上传"  name="personPhotoButton" type="button"  style="display:inline-block;width:60px;height:24px;" onClick="personPhoto.click()" /></body></html>
0 0