1. 程式人生 > >菜鳥學JS——上傳圖片之上傳前預覽圖片

菜鳥學JS——上傳圖片之上傳前預覽圖片

上傳圖片對圖片進行一下預覽,可以瞭解圖片上傳後大概會是什麼樣子,此功能用js實現,然後在fileupload控制元件的change事件中呼叫,這樣當用fileupload選擇完圖片以後,圖片就會自動顯示出來了。功能很簡單,卻很實用。

預覽圖片的js程式碼:

<script type="text/javascript">
        function setImagePreview(docObj,localImagId,imgObjPreview) 
        {
            if(docObj.files && docObj.files[0])
            {
                //火狐下,直接設img屬性
                imgObjPreview.style.display = 'block';
                imgObjPreview.style.width = '300px';
                imgObjPreview.style.height = '200px';                    


                //火狐7以上版本不能用上面的getAsDataURL()方式獲取,需要一下方式  
                imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
            }
            else
            {
                //IE下,使用濾鏡
                docObj.select();
                var imgSrc = document.selection.createRange().text;
                
                //必須設定初始大小
                localImagId.style.width = "300px";
                localImagId.style.height = "200px";
                
                //圖片異常的捕捉,防止使用者修改後綴來偽造圖片
                try
                {
                    localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                    localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
                 }
                 catch(e)
                 {
                    alert("您上傳的圖片格式不正確,請重新選擇!");
                    return false;
                  }                          
                  imgObjPreview.style.display = 'none';
                  document.selection.empty();
            }
            return true;
        }
</script>

fileupload控制元件及用來預覽圖片的image:

<div id="localImag"  style="width: 300px; height: 200px">
   <img id="preview" alt="預覽圖片" src="../../Images/noImage.gif" width="300px" height="200px" />
</div>
<asp:FileUpload ID="PicLoad" Width="300px" runat="server" onchange="javascript:setImagePreview(this,localImag,preview);"></asp:FileUpload>
</asp:FileUpload>


功能很簡單,程式碼也很易懂,相信不用我多廢話大家也能看懂吧。感覺寫這樣的文章,真的沒啥好說的,不多說,還是把重點放在程式碼上吧。

相關推薦

JS——圖片之上圖片

上傳圖片對圖片進行一下預覽,可以瞭解圖片上傳後大概會是什麼樣子,此功能用js實現,然後在fileupload控制元件的change事件中呼叫,這樣當用fileupload選擇完圖片以後,圖片就會自動顯示出來了。功能很簡單,卻很實用。 預覽圖片的js程式碼: <s

JS——自動隱藏的懸浮框

今天寫一個小例項,用js和css寫一個可以自動隱藏的懸浮框。css肯定是用來控制樣式的,js用來控制器顯示與隱藏的。顯示與隱藏通常有兩種方法實現:1,用js控制其顯示屬性;2,用js控制其大小。 今天要說的就是通過控制其大小來實現元素的顯隱,原理:為其註冊滑鼠移入、移出

ajax非同步請求提交圖片表單並圖片

一、表單上傳檔案必須加上enctype="multipart/form-data",(以下是上傳檔案的表單) <form action="<%=basePath%>UploadImage" method="post" id="uploadForm" en

使用js獲取input file的絕對路徑圖片C:\fakepath\問題

1.問題 頁面有一個input file伺服器控制元件,一個div,div是image標籤的容器,當點選input file的值改變,我們往div裡追加image標籤;  但當通過js的onchange事件動態獲取input file 的路徑的時候,發現console.log(path

js批量圖片

前提:<script src="js/jquery.min.js"></script> 參考:http://www.jq22.com/jquery-info833 1.頁面程式碼 <!--第一張-->      

Ajax檔案之上圖片

這用到iframe+form形式上傳圖片 簡單的  不利用formData物件 onchange=''   也是用來觸發事件,當狀態一改變就執行寫入的函式 為了確保圖片路徑要唯一:uuid+obj.name onload=''  做回撥函式,對後端傳來的資料處理 前端

js 圖片並轉為base64編碼+圖片+壓縮

js 上傳圖片並轉為base64編碼+預覽圖片+壓縮 html部分 <div id="adds" class="fix"> <form id="myForm" class="clearfix left" name="myForm"> <div clas

前端node.js初體驗(一)

如今,nodejs如此之火,讓我這個打算從事前端開發的小白,也忍不住要學習一下,然而剛剛接觸nodejs,就深深的喜歡上了這個語言。 下面我將分享一下我最初學習nodejs時的總結的學習經驗,也是總結一下近期學習的知識,還會總結我在學習中遇到的困難,又是如何解

微信公眾號開發《四》使用微信JS-SDK實現手機圖片,支援壓縮、。並下載圖片到自身伺服器

在這貼上上三篇博文連結,方便大家查閱互相學習: 本次講解微信開發第四篇:呼叫微信JS-SDK實現上傳手機圖片到伺服器,是非常常見的功能。如我們看到的使用者上傳頭像 下面是本次要實現的效果圖,支援預覽,壓縮上傳(自帶,可引數控制) 1.準備工作:工欲善其事,必先利其

freeswitch(六)將貓池註冊到公網fs

設備 val onf alt color tro ssi idg clas 1.了解一下啥是貓池,簡單來說就是插了很多張手機卡的一個硬件設備,可以通過貓池將信號撥出去,具體可以谷歌搜一搜 2.登錄設備網頁 我這個是192.168.1.249 輸入賬號和密碼 3.基

php擴充套件 之 詳解擴充套件函式的參(如何獲取引數)(三)

前言 經過上一文 菜鳥學php擴充套件 之 自動生成的擴充套件框架詳解(二) ,對php擴充套件框架的整體瞭解,基本上可以說,對於扯淡如何寫php擴充套件和關鍵點有了一定的把握,但關鍵的還是在於如何寫PHP_FUNCTION的函式。 本文主要記錄一下,p

js實現對圖片進行壓縮並且

js實現對上傳圖片的路徑轉成base64編碼,並且對圖片進行壓縮,實現預覽功能 需要先引入jquery: <script src="http://i.gtimg.cn/qzone/biz/gdt/lib/jquery/jquery-2.1.4.js?max_age=3

安卓】- TextView 顯示Html 一 解決圖片顯示不了的小問題

今天學習 TextView 顯示 html  但一直有一個問題就是圖片顯示不了 程式碼如下: ImageGetter imgGetter = new Html.ImageGetter() { public Drawable getDrawable(String so

WCF】使用js+ajax呼叫WCF以及返回資料型別的控制

先上程式碼,再談問題。 Service1.svc.cs程式碼: using System; using System.Collections.Generic; using System.Linq; using System.Runtime.Serialization;

《跟Cisco UC部署實戰》-第 1 章 規劃(免費視頻)

cup cucm cisco uc uccx jabber 第 1 章 規劃(免費)本章主要介紹:1.演示IP Phone註冊到CUCM 11.X,實現呼入呼出功能。2.演示Jabber的註冊到CUP 11.X ,實現即時消息功能。3.演示座席班長,座席註冊到UCCX 11.X,實現Cal

[轉]html之file標簽 --- 圖片 -- FileReader

disabled scrip ade java undefine 內容 .com 知識 nim 記得以前做網站時,曾經需要實現一個圖片上傳到服務器前,先預覽的功能。當時用html的<input type="file"/>標簽一直實現不了,最後舍棄了這個標簽,使用

angular +H5 圖片圖片

scrip reader tex load .sh upd http upload wim //index.html <form class="form-horizontal"> <div class="panel panel-default"&g

暑假記---html/css

html、css 、菜鳥求學今天學習的是如何使用div盒子模型做一個具有多邊形旋轉放大的一個基礎特效頁面。需求分析:1、多邊形如何生成;使用css3中的transform屬性對元素進行旋轉 2、使用background:rgba設置半透明屬性所遇到的問題:1、樣式圖片不能位於中間?解決方案采用自適應

Python第一天(簡介)

pythonPython簡單介紹  Python 是一個高層次的結合了解釋性、編譯性、互動性和面向對象的腳本語言。python 的設計具有很強的可讀性,相比其他語言經常使用英文關鍵字,其他語言的一些標點符號,它具有比其他語言更有特色語法結構。  Python 是一種解釋型語言: 這意味著開發過程中沒有了編譯這