整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
能：純VUE，純前端實現文件上傳，支持文件上傳，大文件上傳，文件夾上傳，100G超大文件斷點續傳，MD5校驗，文件秒傳，云存儲，比如阿里云，七牛云，華為云，百度云，騰訊云，
核心優勢：使用簡單，配置簡單，集成簡單，維護簡單。提供前端源代碼，提供后端源代碼，提供7*24小時專業工程師技術支持。
代碼：https://gitee.com/xproer/up6-vue-cli
1.引入up6組件
2.配置接口地址
接口地址分別對應：文件初始化，文件數據上傳，文件進度，文件上傳完畢，文件刪除，文件夾初始化，文件夾刪除，文件列表
參考：http://www.ncmem.com/doc/view.aspx?id=e1f49f3e1d4742e19135e00bd41fa3de
3.定義事件
格元素詳解與練習
提到表格，大家最先想到的就是EXCEL這款軟件，實際上在對表格的操作上，HTML與EXCEL非常相似。
在展示數據，統計數據方面，表格比文字描述更具表達優勢，在網頁中，表格也經常被用來展示數據、計劃日常安排等內容。如圖所示：
今天我們就來學習一下如何向頁面中添加表格元素。
首先來介紹一下表格元素中的基本標簽。
NO.1：<table></table>
這個標簽是書寫表格的第一個標簽，它本身在頁面上看不出什么內容，但是它的屬性可以控制表格顯示的全局樣式。這個標簽的開始標簽寫在表格元素的開頭，結尾標簽寫在表格元素的結尾。
NO.2：<caption></caption>
這個標簽是表格的標題標簽。
NO.3：<tr></tr>
這個標簽定義表格的列標簽。
NO.4：<th></th>
這個標簽是列表標題標簽，例如，男生、女士、姓名等。
NO.5：<td></td>
這個標簽定義表格的行標簽。
OK，這些基本標簽就可以構建一個基礎的表格元素。示例代碼如下：
<table><!-- 寫在表格元素的開頭 --><caption>表格標題</caption><!-- 表格標題 --><tr>標題標簽<th>姓名</th><!-- 標題標簽 --><th>年齡</th></tr><tr><td>一列一行</td><td>一列二行</td></tr><tr><td>二列一行</td><td>二列二行</td></tr></table><!-- 寫在表格元素的結尾 -->
頁面效果如圖所示：沒有表格的外邊框。
如何添加外邊框呢？在<table>標簽中修改border屬性即可，示例代碼如下：border="1"是給表格添加寬為1的邊界線。
<table border = "1"><!-- border="1"是給表格添加寬為1的邊界線 -->效果如圖所示：
這時，您會發現表格在頁面上的尺寸非常小，可不可以按照頁面尺寸來顯示表格嗎？當然可以，這就需要為<table>標簽修改第二個屬性width，示例代碼如圖所示：width = "100%"指的是表格寬度與平面寬度一致。
<table border = "1" width = "100%"><!-- width = "100%"指的是表格寬度與平面寬度一致 -->效果如圖所示：
ok！今天的講解先到這里，明天我會繼續為大家講解<thead></thead>、<tfoot></tfoot>、<tbody></tbody>三個標簽，以及合并單元格操作。
今天的完整代碼示例如下：
<!DOCTYPE HTML>
<html>
<head>
<title>第一個網頁</title>
</head>
<body><h1>第一個網頁</h1><hr>
<h2>表格元素</h2><hr>
<table border = "1" width = "100%">
<caption>表格標題</caption>
<tr>
<th>姓名</th>
<th>年齡</th>
</tr>
<tr><td>一列一行</td>
<td>一列二行</td>
</tr>
<tr>
<td>二列一行</td>
<td>二列二行</td>
</tr>
</table>
</body>
</html>正所謂萬丈高樓平地起，html技術雖然簡單，但是內容相對繁瑣，也是以后進一步學習網頁制作的基礎，希望大家動手寫每一段代碼，把每一步踩堅實。
喜歡的小伙伴請關注我，閱讀中遇到任何問題請給我留言，如有疏漏或錯誤歡迎大家斧正，不勝感激！
HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作
HTML是什么？——零基礎自學網頁制作
第一個HTML頁面如何寫？——零基礎自學網頁制作
HTML頁面中head標簽有啥用？——零基礎自學網頁制作
初識meta標簽與SEO——零基礎自學網頁制作
HTML中的元素使用方法1——零基礎自學網頁制作
HTML中的元素使用方法2——零基礎自學網頁制作
HTML元素中的屬性1——零基礎自學網頁制作
HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作
使用HTML添加表格1（基本元素）——零基礎自學網頁制作
使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作
使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作
使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作
16進制顏色表示與RGB色彩模型——零基礎自學網頁制作
HTML中的塊級元素與內聯元素——零基礎自學網頁制作
初識HTML中的<div>塊元素——零基礎自學網頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作
封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作
HTML表單元素初識1——零基礎自學網頁制作
HTML表單元素初識2——零基礎自學網頁制作
HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作
HTML表單4（form的action、method屬性）——零基礎自學網頁制作
HTML列表制作講解——零基礎自學網頁制作
為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作
HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作
擊右上方紅色按鈕關注“web秀”，讓你真正秀起來
冬至，希望大家都可以有餃子和湯圓吃，主要是能和自己家人愛人一起吃個飯。
下面進入主題，用原生JS給擼個圖片上傳，預覽的小示例，希望對大家有所幫助。
function fChange() {
let file = document.getElementById('file');
// 輸出已經選擇圖片名字
console.log(file.value);
// 輸出已經選擇的圖片對象
console.log(file.files[0]);
}
...
<input type="file" id="file" onchange="fChange()">
10行JavaScript代碼完成圖片的上傳預覽
我們怎么把圖片對象渲染到頁面了？達到可以預覽的目的？
// file 轉 blob對象
let bold = window.URL.createObjectURL(file.files[0]);
console.log('bold==>'+bold);
let boldImg = document.getElementById('bold');
boldImg.src = bold;
// file 轉 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代碼完成圖片的上傳預覽
10行JavaScript代碼完成圖片的上傳預覽
這樣看blob對象和base64都可以預覽圖片，但是blob對象僅僅是當次緩存，如果刷新，你重新把之前轉的字符串放到src是不可以預覽的，當時base64是可以的。所以存庫的時候不僅可以圖片路徑，還可以直接存base64（base64很占用數據庫空間，文件越大，base64字符串越大）
下面我們對上面示例做優化，可以上傳多張圖片并預覽，美化界面。
10行JavaScript代碼完成圖片的上傳預覽
10行JavaScript代碼完成圖片的上傳預覽
<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');
// 監聽圖片點擊，從而觸發input file的點擊事件
addPic.addEventListener('click', function(){
upFile.click();
})
function fChange() {
let file = document.getElementById('up-file');
let imgPre = document.getElementById('img-pre');
// file 轉 blob對象
let bold = window.URL.createObjectURL(file.files[0]);
// 創建img元素，并添加到img-pre元素里
var img = document.createElement("img");
img.setAttribute("src", bold);
imgPre.appendChild(img);
}
主要是通過css隱藏掉input file選擇文件按鈕，然后用+號圖片點擊事件來觸發input file的點擊事件，達到能選擇圖片的目的。
喜歡小編的點擊關注，了解更多知識！
源碼地址請點擊下方“了解更多”
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
