社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > H5教程 > html5讀取本機檔案範例程式碼_html5教學技巧

html5讀取本機檔案範例程式碼_html5教學技巧

WBOY
發布： 2016-05-16 15:47:59
原創
1670 人瀏覽過

html結構樣式如下：

複製代碼
代碼如下:









從樣式上說您應不顯示input元素的輸入框，這時需將input設定為透明樣式，然後將其覆蓋到button元素上方，這時方可實現點擊button上傳圖片。將accepted設定為“image/*”，則只允許圖片類別檔案上傳。

Css樣式如下

複製代碼
代碼如下:

.addpic{
position:relative;
margin-left:100px;
width:95px;
height:30px;
}
.addlogo {
background:
. scroll 0 0 rgba(0, 0, 0, 0);
cursor: pointer;
font-size: 30px;
opacity: 0;
position: absolute;
opacity: 0;
position: absolute;
right: 00 ;
top: 0;
z-index: 10;
}

js代碼
複製程式碼

程式碼如下:


function readFiles(evt){
var files=evt.target.files;
if(!files){
console.log("the file is invaild");
return;
}
for(var i=0, file; file=files[i]; i ){
var imgele=new Image();
var thesrc=window.URL.createObjectURL(file);
imgele.src=thesrc;
imgele.onload=function(){
$("#showlogo ").attr("src",this.src);
}
}
}
複製程式碼


程式碼如下:


$(document).ready(function(){
$("#logoimg").change(function(ee ){
readFiles(e) }); });
相關標籤：
html5
來源：php.cn
上一篇：html5選單摺紙效果_html5教學技巧 下一篇：html5實作canvas陰影效果範例_html5教學技巧
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
如何讓我的圖像顯示在頁面的主顯示幕上？ 我想做的是使用NASAAPI接收一些照片。然後在我的網頁的縮圖和主顯示屏上顯示這些照片。我只是弄清楚為什麼程式碼不從縮圖中獲取圖像並將其顯示在頁面上。我還使用HTML5以上版本的模...
來自於 2024-04-06 15:33:12
0
1
433
PDF檔案能夠運行HTML5和Javascript嗎？ 我有一個愚蠢的想法，想嘗試製作一個在任何計算機上都不會被阻止的程序，因為它將嵌入在PDF中（我聽說Javascript可以在PDF中運行）。它將在PDF檔案中運行HTML5和Jav...
來自於 2024-04-05 12:57:00
0
1
456
HTML5中的enctype和formenctype有什麼差別？ 我只是想知道HTMLLivingStandard（又稱新的HTML5規範）中的屬性enctype和formenctype之間有什麼區別？我一直在閱讀《開發人員的HTML標準》，但似...
來自於 2024-04-02 11:47:56
0
1
275
使頁面適合行動裝置嗎？ 我有很多網頁和一些網站。問題是，我是一個初學者。我使用基本的html5和css3，但我不知道如何使它們放大、縮小並且適合行動裝置。例如，這是我的頁面之一和我的網站之一，您可以在其中...
來自於 2024-04-01 20:42:38
0
1
259
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板