用HTML實現(xiàn)本地文件的上傳

能：純VUE，純前端實現(xiàn)文件上傳，支持文件上傳，大文件上傳，文件夾上傳，100G超大文件斷點續(xù)傳，MD5校驗，文件秒傳，云存儲，比如阿里云，七牛云，華為云，百度云，騰訊云，

核心優(yōu)勢：使用簡單，配置簡單，集成簡單，維護簡單。提供前端源代碼，提供后端源代碼，提供7*24小時專業(yè)工程師技術(shù)支持。

代碼：https://gitee.com/xproer/up6-vue-cli

1.引入up6組件

2.配置接口地址

接口地址分別對應(yīng)：文件初始化，文件數(shù)據(jù)上傳，文件進度，文件上傳完畢，文件刪除，文件夾初始化，文件夾刪除，文件列表

參考：http://www.ncmem.com/doc/view.aspx?id=e1f49f3e1d4742e19135e00bd41fa3de

3.定義事件

格元素詳解與練習(xí)

提到表格，大家最先想到的就是EXCEL這款軟件，實際上在對表格的操作上，HTML與EXCEL非常相似。

在展示數(shù)據(jù)，統(tǒng)計數(shù)據(jù)方面，表格比文字描述更具表達優(yōu)勢，在網(wǎng)頁中，表格也經(jīng)常被用來展示數(shù)據(jù)、計劃日常安排等內(nèi)容。如圖所示：

今天我們就來學(xué)習(xí)一下如何向頁面中添加表格元素。

首先來介紹一下表格元素中的基本標(biāo)簽。

NO.1：<table></table>

這個標(biāo)簽是書寫表格的第一個標(biāo)簽，它本身在頁面上看不出什么內(nèi)容，但是它的屬性可以控制表格顯示的全局樣式。這個標(biāo)簽的開始標(biāo)簽寫在表格元素的開頭，結(jié)尾標(biāo)簽寫在表格元素的結(jié)尾。

NO.2：<caption></caption>

這個標(biāo)簽是表格的標(biāo)題標(biāo)簽。

NO.3：<tr></tr>

這個標(biāo)簽定義表格的列標(biāo)簽。

NO.4：<th></th>

這個標(biāo)簽是列表標(biāo)題標(biāo)簽，例如，男生、女士、姓名等。

NO.5：<td></td>

這個標(biāo)簽定義表格的行標(biāo)簽。

OK，這些基本標(biāo)簽就可以構(gòu)建一個基礎(chǔ)的表格元素。示例代碼如下：

頁面效果如圖所示：沒有表格的外邊框。

如何添加外邊框呢？在<table>標(biāo)簽中修改border屬性即可，示例代碼如下：border="1"是給表格添加寬為1的邊界線。

<table border = "1"><!-- border="1"是給表格添加寬為1的邊界線 -->

效果如圖所示：

這時，您會發(fā)現(xiàn)表格在頁面上的尺寸非常小，可不可以按照頁面尺寸來顯示表格嗎？當(dāng)然可以，這就需要為<table>標(biāo)簽修改第二個屬性width，示例代碼如圖所示：width = "100%"指的是表格寬度與平面寬度一致。

<table border = "1" width = "100%"><!-- width = "100%"指的是表格寬度與平面寬度一致 -->

效果如圖所示：

ok！今天的講解先到這里，明天我會繼續(xù)為大家講解<thead></thead>、<tfoot></tfoot>、<tbody></tbody>三個標(biāo)簽，以及合并單元格操作。

今天的完整代碼示例如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一個網(wǎng)頁</title>
</head> 
<body><h1>第一個網(wǎng)頁</h1><hr>
<h2>表格元素</h2><hr>
<table border = "1" width = "100%">
  <caption>表格標(biāo)題</caption>
<tr>
  <th>姓名</th>
<th>年齡</th>
</tr>
<tr><td>一列一行</td>
<td>一列二行</td>
</tr>
<tr>
  <td>二列一行</td>
<td>二列二行</td>
</tr>
</table>
</body> 
</html>

正所謂萬丈高樓平地起，html技術(shù)雖然簡單，但是內(nèi)容相對繁瑣，也是以后進一步學(xué)習(xí)網(wǎng)頁制作的基礎(chǔ)，希望大家動手寫每一段代碼，把每一步踩堅實。

喜歡的小伙伴請關(guān)注我，閱讀中遇到任何問題請給我留言，如有疏漏或錯誤歡迎大家斧正，不勝感激！

HTML完整學(xué)習(xí)目錄

HTML序章（學(xué)習(xí)目的、對象、基本概念）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

第一個HTML頁面如何寫？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML頁面中head標(biāo)簽有啥用？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

初識meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格1（基本元素）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

16進制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的塊級元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作

初識HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作

封閉在家學(xué)網(wǎng)頁制作！為頁面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單元素初識1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單元素初識2——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單4（form的action、method屬性）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁制作

為HTML頁面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作

音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中使用<a>標(biāo)簽實現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁制作

擊右上方紅色按鈕關(guān)注“web秀”，讓你真正秀起來

前言

冬至，希望大家都可以有餃子和湯圓吃，主要是能和自己家人愛人一起吃個飯。

下面進入主題，用原生JS給擼個圖片上傳，預(yù)覽的小示例，希望對大家有所幫助。

示例

function fChange() { 
 let file = document.getElementById('file'); 
 // 輸出已經(jīng)選擇圖片名字 
 console.log(file.value); 
 // 輸出已經(jīng)選擇的圖片對象 
 console.log(file.files[0]); 
} 
... 
<input type="file" id="file" onchange="fChange()">

10行JavaScript代碼完成圖片的上傳預(yù)覽

我們怎么把圖片對象渲染到頁面了？達到可以預(yù)覽的目的？

// file 轉(zhuǎn) blob對象 
let bold = window.URL.createObjectURL(file.files[0]); 
console.log('bold==>'+bold); 
 
let boldImg = document.getElementById('bold'); 
boldImg.src = bold; 
 
// file 轉(zhuǎn) base64 
let base64Img = document.getElementById('base64'); 
var reader = new FileReader(); 
reader.readAsDataURL(file.files[0]); 
reader.onload = function (e) { 
 console.log('base64==>'+this.result); 
 base64Img.src = this.result; 
}

10行JavaScript代碼完成圖片的上傳預(yù)覽

這樣看blob對象和base64都可以預(yù)覽圖片，但是blob對象僅僅是當(dāng)次緩存，如果刷新，你重新把之前轉(zhuǎn)的字符串放到src是不可以預(yù)覽的，當(dāng)時base64是可以的。所以存庫的時候不僅可以圖片路徑，還可以直接存base64（base64很占用數(shù)據(jù)庫空間，文件越大，base64字符串越大）

優(yōu)化

下面我們對上面示例做優(yōu)化，可以上傳多張圖片并預(yù)覽，美化界面。

10行JavaScript代碼完成圖片的上傳預(yù)覽

<div id="img-pre"> 
</div> 
<div id="add-pic"> 
 <input type="file" id="up-file" onchange="fChange()"> 
</div>

css樣式

#add-pic{ 
 width: 100px; 
 height: 100px; 
 background: url('./add-pic.png') 
} 
#add-pic input{ 
 width: 100%; 
 height: 100%; 
 display: none; 
} 
#img-pre:after{ 
 display: block; 
 content: ''; 
 clear: both; 
} 
#img-pre img{ 
 float: left; 
 width: 100px; 
 height: 100px; 
 margin-right: 10px; 
}

javascript

let addPic = document.getElementById('add-pic'), upFile = document.getElementById('up-file'); 
// 監(jiān)聽圖片點擊，從而觸發(fā)input file的點擊事件 
addPic.addEventListener('click', function(){ 
 upFile.click(); 
}) 
function fChange() { 
 let file = document.getElementById('up-file'); 
 let imgPre = document.getElementById('img-pre'); 
 
 // file 轉(zhuǎn) blob對象 
 let bold = window.URL.createObjectURL(file.files[0]); 
 
 // 創(chuàng)建img元素，并添加到img-pre元素里 
 var img = document.createElement("img"); 
 img.setAttribute("src", bold); 
 imgPre.appendChild(img); 
}

主要是通過css隱藏掉input file選擇文件按鈕，然后用+號圖片點擊事件來觸發(fā)input file的點擊事件，達到能選擇圖片的目的。

公告

喜歡小編的點擊關(guān)注，了解更多知識！

源碼地址請點擊下方“了解更多”

在線咨詢

上一篇：快速了解JavaScript選擇框操作
下一篇：HTML5基礎(chǔ)入門

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

用HTML實現(xiàn)本地文件的上傳

HTML完整學(xué)習(xí)目錄

前言

示例

優(yōu)化

公告

您的項目需求