這篇文章主要介紹了基于ASP.NET+easyUI框架實(shí)現(xiàn)圖片上傳功能的相關(guān)資料,重點(diǎn)在于如何判斷格式，實(shí)現(xiàn)即時(shí)瀏覽，需要的朋友可以參考下
基于ASP.Net +easyUI框架上傳圖片，判斷格式+實(shí)現(xiàn)即時(shí)瀏覽，具體內(nèi)容如下:
<div>
選擇圖片:<input id="idFile" runat="server" name="pic" onchange="javascript:setImagePreview(this,localImag,preview);" type="file" />
</div>
預(yù) 覽:
<div id="localImag">
<%--預(yù)覽，默認(rèn)圖片--%>
<img id="preview" onclick="over(preview,divImage,imgbig);" src="img/5691.jpg"/>
</div>
--------------------------------------------------
<script>
//檢查圖片的格式是否正確,同時(shí)實(shí)現(xiàn)預(yù)覽
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]; //這個(gè)文件類型正則很有用
////布爾型變量
var isExists = false;
//循環(huán)判斷圖片的格式是否正確
for (var i in array) {
if (fileContentType.toLowerCase() == array[i].toLowerCase()) {
//圖片格式正確之后，根據(jù)瀏覽器的不同設(shè)置圖片的大小
if (obj.files && obj.files[0]) {
//火狐下，直接設(shè)img屬性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '400px';
imgObjPreview.style.height = '400px';
//火狐7以上版本不能用上面的getAsDataURL()方式獲取，需要一下方式
imgObjPreview.src = window.URL.createObjectURL(obj.files[0]);
}
else {
//IE下，使用濾鏡
obj.select();
var imgSrc = document.selection.createRange().text;
//必須設(shè)置初始大小
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;
}
}
//顯示圖片
function over(imgid, obj, imgbig) {
//大圖顯示的最大尺寸 4比3的大小 400 300
maxwidth = 400;
maxheight = 300;
//顯示
obj.style.display = "";
imgbig.src = imgid.src;
//1、寬和高都超過了，看誰超過的多，誰超的多就將誰設(shè)置為最大值，其余策略按照2、3
//2、如果寬超過了并且高沒有超，設(shè)置寬為最大值
//3、如果寬沒超過并且高超過了，設(shè)置高為最大值
if (img.width > maxwidth && img.height > maxheight) {
pare = (img.width - maxwidth) - (img.height - maxheight);
if (pare >= 0)
img.width = maxwidth;
else
img.height = maxheight;
}
else if (img.width > maxwidth && img.height <= maxheight) {
img.width = maxwidth;
}
else if (img.width <= maxwidth && img.height > maxheight) {
img.height = maxheight;
}
}
</script>
界面效果圖：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助