html上傳預覽圖片原理,關于html中圖片上傳預覽的實現

functionchange() {varpic=document.getElementById("preview"),

file=document.getElementById("f");//得到后綴名

varext=file.value.substring(file.value.lastIndexOf(".")+1).toLowerCase();//gif在IE瀏覽器暫時無法顯示

if(ext!='png'&&ext!='jpg'&&ext!='jpeg'){

alert("圖片的格式必須為png或者jpg或者jpeg格式!");return;

}varisIE=navigator.userAgent.match(/MSIE/)!= null,

isIE6=navigator.userAgent.match(/MSIE 6.0/)!= null;

if(isIE) {

file.select();

var reallocalpath = document.selection.createRange().text;

// IE6瀏覽器設置img的src為本地路徑可以直接顯示圖片

if (isIE6) {

pic.src = reallocalpath;

}else {

// 非IE6版本的IE由于安全問題直接設置img的src無法顯示本地圖片,但是可以通過濾鏡來實現

pic.style.filter= "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src="" +reallocalpath+ "")";//設置img的src為base64編碼的透明圖片 取消顯示瀏覽器默認圖片

pic.src= 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';

}

}else{

html5Reader(file);

}

}functionhtml5Reader(file){varfile=file.files[0];varreader= newFileReader();

reader.readAsDataURL(file);

reader.οnlοad= function(e){varpic=document.getElementById("preview");

pic.src=this.result;

}

}

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/454550.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/454550.shtml
英文地址,請注明出處:http://en.pswp.cn/news/454550.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

程序員成功之路

程序員成功之路 ——The road ahead for programmer(演講稿) 一、我很羨慕在座的各位同學,因為你們是中國未來的程序員,而我不是,我一直很遺憾。 比爾蓋茨曾經寫過一本書叫做《未來之路》The road ahead, 那么今天我選…

【溫故知新】——原生js中常用的四種循環方式

一、引言 本文主要是利用一個例子,講一下原生js中常用的四種循環方式的使用與區別: 實現效果: 在網頁中彈出框輸入0 網頁輸出“歡迎下次光臨”在網頁中彈出框輸入1 網頁輸出“查詢中……”在網頁中彈出框輸入2 網頁輸出“取款中……”在…

部署egg需要用到pm2嗎_使用寶塔面板部署校園綜合服務平臺項目

本文檔為校園綜合服務平臺服務端的安裝部署教程,歡迎star小程序端下載地址:https://github.com/landalfYao/help.git后臺服務端下載地址:https://github.com/landalfYao/helpserver.git后臺客戶端下載地址:https://github.com/lan…

機器學習算法之線性回歸

一、什么是回歸算法 回歸算法是一種有監督算法 回歸算法是一種比較常用的機器學習算法,用來建立“解釋”變量(自變量X)和觀測值(因變量Y)之間的關系;從機器學習的角度來講,用于構建一個算法模型(函數)來做屬性(X)與標簽(Y)之間的映射關系&a…

html中怎么寫多選框,如何在HTML中實現“選擇所有”復選框?

checkboxes document.getElementsByName(foo);for(var checkbox in checkboxes)checkbox.checked source.checked;} Toggle AllBar 1 Bar 2Bar 3 Bar 4最新情況:這個for each...in構造在Safari 5或Chrome 5中似乎不起作用,至少在本例中是這樣的。這段代…

Console-算法[for]-國王與老人的六十四格

ylbtech-Arithmetic:Console-算法[for]-國王與老人的六十四格1.A,案例-- -- ylb:算法-- Type:算法[for]-- munu:國王與老人的六十四格-- 20:32 2012/3/16-- 案例:印度有個國王,他擁有超人的權力和巨大的財富。但權力和財富最終讓他…

程序人生感悟

<本來不想寫的&#xff0c;實在不想看到某些人誤人子弟&#xff0c;混淆視聽&#xff0c;耽誤了中國IT的未來&#xff0c;所以一吐為快) 一些人總是發出一些錯誤的聲音&#xff0c;形成了劣勝優汰可怕的現象。他們在誤導著中國&#xff0c;把我們的后繼軍訓練成軟件藍領―…

python的excel庫_Python-Excel 模塊哪家強?

0. 前言 從網頁爬下來的大量數據需要清洗&#xff1f; 成堆的科學實驗數據需要導入 Excel 進行分析&#xff1f; 有成堆的表格等待統計&#xff1f; 作為人生苦短的 Python 程序員&#xff0c;該如何優雅地操作 Excel&#xff1f; 得益于前人的辛勤勞作&#xff0c;Python 處理…

html如何設置滑輪效果,HTML中鼠標滾輪事件onmousewheel處理

滾輪事件是不同瀏覽器會有一點點區別&#xff0c;一個像Firefox使用DOMMouseScroll ,ff也可以使用addEventListener方法綁定DomMouseScroll事件&#xff0c;其他的瀏覽器滾輪事件使用mousewheel&#xff0c;下面我來給大家具體介紹。Firefox使用DOMMouseScroll&#xff0c;其他…

在OOW2009上尋寶撞大運續(床上篇)

歷時5天的Oracle Open World 2009終于&#xff0c;終于結束了。今天最后的節目是去聽一場金融分析師的會議&#xff0c;“只”開了不到6個鐘。去的時候是毛毛雨&#xff0c;回來的時候終于看到了一縷陽光。說夕陽無限好不大合適。用Larry Ellison的說法是“太陽落下的地方也是太…

skynet記錄6:定時器

稍后填坑 kernel中&#xff0c;每一次時鐘中斷會trap到kernel code&#xff0c;這個時間間隔稱之為jiffies&#xff0c;每秒鐘發生的次數為HZ 如果是4核&#xff0c;分配到每個核就是HZ/4 cat /boot/config-uname -r | grep ^CONFIG_HZ 輸出&#xff1a; CONFIG_HZ250 cat /pro…

html圖片平鋪不重復整個頁面,JSP網頁背景圖片怎樣不平鋪,不重復出現啊...

2016-07-10 13:12最佳答案1,Q:怎樣把別人網頁上的背景音樂保存下來?A:瀏覽該網頁后,在你的 Windows\Temporary Internet Files 文件夾下可以找到該背景音樂的緩存文件&#xff0c;拷貝出來即可使用。如果還是找不見該文件&#xff0c;可以打開網頁的源文件&#xff0c;找到音樂…

特征圖注意力_從數據結構到算法:圖網絡方法初探

作者 | 朱梓豪來源 | 機器之心原文 | 從數據結構到算法&#xff1a;圖網絡方法初探如果說 2019 年機器學習領域什么方向最火&#xff0c;那么必然有圖神經網絡的一席之地。其實早在很多年前&#xff0c;圖神經網絡就以圖嵌入、圖表示學習、網絡嵌入等別名呈現出來&#xff0c;其…

FFMPEG 源碼分析

FFMPEG基本概念&#xff1a; ffmpeg是一個開源的編解碼框架&#xff0c;它提供了一個音視頻錄制&#xff0c;解碼和編碼庫。FFMPEG是在linux下開發的&#xff0c;但也有windows下的編譯版本。 ffmpeg項目由以下幾部分組成: ffmpeg 視頻文件轉換命令行工具,也支持經過實時電視…

面試之 Redis匯總

簡介 Redis 持久化機制 RDB&#xff08;Redis DataBase&#xff09; AOF&#xff08;Append-only file&#xff09; Redis 4.0 對于持久化機制的優化 補充&#xff1a;AOF 重寫 二者的區別 二者優缺點 Memcache與Redis的區別都有哪些&#xff1f; 緩存雪崩、緩存穿透、…

Oracle 10g 問題集錦

監聽服務中Oracle數據庫之中使用最主要的一個服務&#xff0c;但是這個服務經常會出現錯誤&#xff0c;包括以后在工作之中此服務也會出現錯誤&#xff0c;故給出兩種常見錯誤的解決方案&#xff08;故障1、故障2&#xff09; 故障1: 注冊表使用了優化軟件&#xff08;如&#…

iOS linker command failed with exit code 1 (use -v to see invocation)多種解決方案匯總

有時可能會遇到這種錯誤&#xff0c;關鍵是這種錯誤&#xff0c;有時只有這一句話&#xff0c;也不會給更多錯誤信息。 網上找了一些&#xff0c;總結了如下&#xff1a;&#xff08;PS&#xff1a;以下是按照解決簡易程度排序&#xff0c;不代表出現概率&#xff09; 1、bitco…

計算機二級python選擇題題庫_2018年計算機二級python題庫精編(1)

1正則中的^符號&#xff0c;用在一對中括號中則表示要匹配() A.字符串的開始 B.除中括號內的其它字符 C.字符串的結束 D.僅中括號內含有的字符 2靜態成員變量稱為類變量&#xff0c;非靜態成員變量稱為實例變量&#xff0c;下列關于一個類的靜態成員的描述中&#xff0c;不正確…

非常好用!世界上最快最好的視頻壓縮轉換工具(精品)

測試了20多款 各種視頻壓縮 截取軟件 真的是這款最快 快好用 效果也好&#xff01;&#xff01;&#xff01; 最快的視頻轉換壓縮工具。 WisMencoder 能夠把您的電腦上的所有視頻格式&#xff0c;包括avi,mpg,rmvb,wmv,mp4,mov,dat等格式以最快的速度和最高的質量轉換為…

面試之 Mysql 匯總

事務相關 什么是事務&#xff1f; 事務&#xff1a;是由一組SQL語句組成的邏輯處理單元&#xff0c;事務具有以下4個屬性&#xff0c;通常簡稱為事務。事務的ACID屬性&#xff1a; &#xff08;1&#xff09;原子性&#xff08;Atomicity&#xff09;&#xff1a;   事務是一…