2019獨角獸企業重金招聘Python工程師標準>>>

? ?? ? ?最近在做圖片上傳的一個前臺頁面，上傳圖片功能雖然很簡單，但是需要我們學習的地方很多。在上傳圖片之前驗證圖片的格式，并同時實現預覽。這篇博客我們就用一段簡單的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]) {//火狐下，直接設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;//必須設置初始大小 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、寬和高都超過了，看誰超過的多，誰超的多就將誰設置為最大值，其余策略按照2、3 //2、如果寬超過了并且高沒有超，設置寬為最大值 //3、如果寬沒超過并且高超過了，設置高為最大值 if (img.width > maxwidth && img.height > maxheight) {pare = (img.width - maxwidth) - (img.height - maxheight);if (pare >= 0)img.width = maxwidth;elseimg.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>
界面效果

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? ??

? ? ? ?源碼下載

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

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

====================================================================================

? 注：這篇博文需要和下篇博文結合起來看，預覽和上傳才完整，否則瀏覽器可能會報相應錯誤。

====================================================================================

========================================================================================================================

基于asp.net+easyui框架的系列博文：

?

使用Jquery+EasyUI框架開發項目+下載+幫助--EasyUI的簡介

Asp.net之真假分頁大揭秘、使用AspNetPager實現真分頁

Asp.net前端頁面開發總結

Asp.net 一般處理程序+擴展

Asp.Net構架(Http請求處理流程)、Asp.Net 構架(Http Handler 介紹)、Asp.Net 構架(HttpModule 介紹)

基于asp.net + easyui框架，js實現上傳圖片之前判斷圖片格式，同時實現預覽，兼容各種瀏覽器+下載

基于asp.net+ easyui框架，js提交圖片，實現先上傳圖片再提交表單

基于asp.net + easyui框架，一步步學習easyui-datagrid——界面（一）

基于asp.net + easyui框架，一步步學習easyui-datagrid——實現分頁和搜索（二）

基于asp.net + easyui框架，一步步學習easyui-datagrid——實現添加、編輯、刪除（三）

基于asp.net + easyui框架，一步步學習easyui-datagrid——完成，總結（四）

?

=========================================================================================================================

轉載于:https://my.oschina.net/91jason/blog/373273

總結

以上是生活随笔為你收集整理的基于asp.net + easyui框架，js实现上传图片之前判断图片格式，同时实现预览，兼容各种浏览器+下载...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。