Slog43_支配vue框架初階項目之博客網站-單頁-載入要上傳的圖片
- ArthurSlog
- SLog-43
- Year·1
- Guangzhou·China
- Aug 21th 2018
人生就是這樣 苦樂相伴 福禍相依css
開發環境MacOS(High Sierra 10.13.5)
須要的信息和信息源：
- HTTP概述
- HTTP
- 互聯網是如何工做的
- 萬維網是如何工做的
- 統一資源定位符(URL)
- 什麼是超連接
- 建立超連接
- AJAX是異步的JavaScript和XML（Asynchronous JavaScript And XML）
- XMLHttpRequest
- Using files from web applications
開始編碼
- 本篇實現 圖片的上傳 和 頭像的修改
- 咱們先梳理一下，首先要在客戶端部分（瀏覽器端）實現文件的選擇和文件的上傳；在服務端實現文件的接收，重要的是接受以後，把接收到的圖片替換掉 client/image 文件夾裏的圖片文件，這樣的話，當下次打開瀏覽器登錄，從新向服務端拉取數據的時候，就會拉取到更新後的圖像了
- 因此，咱們肯定了須要修改的文件分別是 服務端:serverindex.js、客戶端:clientsignup.js、客戶端:clientapp.html
- 咱們先來更新 html 文件，在頁面上增長一個上傳圖片的功能入口，這裏咱們分紅兩個操做：
- 點擊選擇按鈕，彈出本地文件瀏覽框以後，選擇咱們要的圖片，而後點擊確認，鎖定咱們要的圖片
- 點擊上傳圖片，將咱們鎖定好的圖片上傳至服務器，顯示上傳的結果，客戶端要作的事情了就到這裏爲止了
- 參考 vue.js官方手冊
<div id="example-2"> <!-- `greet` 是在下面定義的方法名 --> <button v-on:click="greet">Greet</button> </div>
var example2 = new Vue({
el: '#example-2',
data: {
name: 'Vue.js'
},
// 在 `methods` 對象中定義方法
methods: {
greet: function (event) {
// `this` 在方法裏指向當前 Vue 實例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
if (event) {
alert(event.target.tagName)
}
}
}
})
// 也能夠用 JavaScript 直接調用方法
example2.greet() // => 'Hello Vue.js!'
- 上面的代碼，說明了在使用 vue.js 框架的時候，當你想要關聯到 原生DOM事件 的時候，須要作兩件事情，第一就是使用 vue.js模版語法 v-on: + 事件（好比 click、change 等等，即：v-on:click、v-on:change）= "方法名（在 js 文件裏實現這個方法）"，來建立一個邏輯使 html文件 和 js文件 互相關聯；第二件事就是運用（運用的意思就是須要知道這個東西的原理，而後結合場景去使用） 原生DOM事件，經過這個 原生DOM事件，html文件上發生的事件所包含的信息能夠傳遞給 js文件，js文件獲得這些信息後 就能夠進行加工修改，而後再次渲染到 html文件上
- 首先先觀察到關鍵詞 event，google一下「event html」：
HTML事件是HTML元素髮生的「事物」。 在HTML頁面中使用JavaScript時，JavaScript能夠對這些事件 作出「反應」。
- 舉個栗子，好比咱們編寫出一個按鈕，而後點擊以後會顯示「ArthurSlog」
<!DOCTYPE html>
<html>
<body>
<button onclick="display()">My name is: </button>
<script>
function display() {
document.getElementById("demo").innerHTML = "ArthurSlog";
}
</script>
<p id="demo"></p>
</body>
</html>
- 上面的代碼，其中事件（event）指的就是「點擊按鈕」這個動做，也就是「onclick」事件，當發生「onclick」事件的時候，會調用到display（）函數，從而執行display（）函數裏面的邏輯，打印出 「ArthurSlog」，上面是沒有使用 vue.js 框架時的語法，事件和函數的關聯方式就是 onclick=「display()」，而使用 vue.js 框架時，咱們須要配合 vue.js 框架使用 vue 的模版語法 「v-on」，因此上面的代碼就會變成：
<!DOCTYPE html>
<html>
<body>
<button v-on:onclick="display">My name is: </button>
<script>
var signup_container = new Vue({
el: '#demo',
data: {
txt: ''
},
methods:{
display: function {
this.txt = "ArthurSlog"
}
}
})
</script>
<p id="demo">{{ txt }}</p>
</body>
</html>
- 原來的 onclick=「display()」 變成了 v-on:onclick="display"
- 因此，咱們的 html 文件更新爲：
client/app.htmlhtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./css/style.css">
<!-- 開發環境版本，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>signin_ArthurSlog</title>
</head>
<body>
<div id="signup-container">
<template class="container" v-if="pagestate === '0'">
<div>This is index's page by ArthurSlog</div>
<br>
<button v-on:click="signin_index">Signin</button>
<br>
<button v-on:click="signup_index">Signup</button>
</template>
<template id="Signin" v-else-if="pagestate === '1'">
<div>This is signin's page by ArthurSlog</div>
<p>Singin</p>
<form id="form1" v-on:submit.prevent="signin">
<br>
<div>
Account: {{ name_signin }}
<br>
<input type="text" v-model="name_signin" placeholder="username">
</div>
<br>
<br>
<div>
Password: {{ password_signin }}
<br>
<input type="text" v-model="password_signin" placeholder="password">
</div>
<br>
<input type="submit" value="登錄">
</form>
<br>
<button v-on:click="return_index">ReturnIndex</button>
</template>
<template id="Signup" v-else-if="pagestate === '2'">
<div>This is signup's page by ArthurSlog</div>
<p>Singup</p>
<form id="form2" v-on:submit.prevent="addUser">
<br>
<div>
Account: {{ name }}
<br>
<input type="text" v-model="name" placeholder="username">
</div>
<br>
<br>
<div>
Password: {{ password }}
<br>
<input type="text" v-model="password" placeholder="password">
</div>
<br>
<br>
<div>
Again Password: {{ repassword }}
<br>
<input type="text" v-model="repassword" placeholder="repassword">
</div>
<br>
<br>
<div>
First Name: {{ firstname }}
<br>
<input type="text" v-model="firstname" placeholder="firstname">
</div>
<br>
<br>
<div>
Last Name: {{ lastname }}
<br>
<input type="text" v-model="lastname" placeholder="lastname">
</div>
<br>
<br>
<div>
Birthday: {{ birthday }}
<br>
<input type="text" v-model="birthday" placeholder="2000/08/08">
</div>
<br>
<br>
<div>
<span>Sex: {{ currentSex }}</span>
<br>
<input type="radio" id="sex" value="male" v-model="currentSex">
<label for="sex">male</label>
<br>
<input type="radio" id="sex" value="female" v-model="currentSex">
<label for="sex">female</label>
</div>
<br>
<br>
<div>
<span>Age: {{ currentAge }}</span>
<br>
<select v-model="currentAge" id="age">
<option disabled value="">Select</option>
<option v-for="age in ages">{{ age }}</option>
</select>
</div>
<br>
<br>
<div>
Wechart: {{ wechart }}
<br>
<input type="text" v-model="wechart" placeholder="wechart's name">
</div>
<br>
<br>
<div>
QQ: {{ qq }}
<br>
<input type="text" v-model="qq" placeholder="12345678">
</div>
<br>
<br>
<div>
Email: {{ email }}
<br>
<input type="text" v-model="email" placeholder="12345678@qq.com">
</div>
<br>
<br>
<div>
Contury: {{ contury }}
<br>
<input type="text" v-model="contury" placeholder="China">
</div>
<br>
<br>
<div>
Address: {{ address }}
<br>
<input type="text" v-model="address" placeholder="Guangzhou">
</div>
<br>
<br>
<div>
Phone: {{ phone }}
<br>
<input type="text" v-model="phone" placeholder="138********">
</div>
<br>
<br>
<div>
Websize: {{ websize }}
<br>
<input type="text" v-model="websize" placeholder="xxx.com">
</div>
<br>
<br>
<div>
Github: {{ github }}
<br>
<input type="text" v-model="github" placeholder="Github's URl">
</div>
<br>
<br>
<div>
Bio: {{ bio }}
<br>
<input type="text" v-model="bio" placeholder="This is the world~">
</div>
<br>
<br>
<input type="submit" value="完成註冊">
</form>
<button v-on:click="addUser">addUser</button>
<br>
<button v-on:click="return_index">ReturnIndex</button>
<br>
</template>
<template id="returnResult" v-else-if="pagestate === '3'">
<div>
<img id="ArthurSlog_icon" src="/image/ArthurSlog.png" alt="ArthurSlog_icon" />
</div>
<div>
<div>Uploading {{ image }} files...</div>
<br>
<input type="file" v-on:change="filesChange">
</div>
<div id="signinResult">
<div v-for="(value, key) in commits">
{{ key }}: {{ value }}
</div>
</div>
</template>
</div>
<script src="./js/signup.js"></script>
</body>
</html>
- 其中更新的部分以下：
client/app.htmlvue
<div>
<div>Uploading {{ image }} files...</div>
<br>
<input type="file" v-on:change="filesChange">
</div>
- 同時，咱們須要更新客戶端的 js文件
- 再次參考 vue.js官方手冊
<div id="example-2"> <!-- `greet` 是在下面定義的方法名 --> <button v-on:click="greet">Greet</button> </div>
var example2 = new Vue({
el: '#example-2',
data: {
name: 'Vue.js'
},
// 在 `methods` 對象中定義方法
methods: {
greet: function (event) {
// `this` 在方法裏指向當前 Vue 實例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
if (event) {
alert(event.target.tagName)
}
}
}
})
// 也能夠用 JavaScript 直接調用方法
example2.greet() // => 'Hello Vue.js!'
- 仔細觀察，能夠發如今 js文件 裏，「alert(event.target.tagName)」 經過，這個語句，js文件獲取到了 html文件裏的一些信息，那麼這些又是些什麼信息呢？google一下「event.target.tagName」，找到 Event Object 的官方說明，能夠理解爲 event 的屬性（Properties），其中發現咱們在找的 target屬性，官方解釋以下：
The target event property returns the element that triggered the event.
- 上面的意思就是 event.target 裏面包含的東西是一些 「element」，不一樣的 event 擁有不一樣的 element
- 能夠想到的是，每次發生事件（event）時，有一些 element 就會發生改變，能夠這麼認爲，這些與 event 相關聯的 element 就包含在 event.target 中
- 下面咱們來實現文件的選擇功能，這裏會用到 input 標籤 和 onchange 事件，也就是說，當選中了咱們要的圖片以後，就會觸發 onchange 事件，而後在 js文件裏，咱們要經過 event.target 來獲取選擇到的文件信息
- 這裏，input 元素（element）和 event 息息相關，也就是說，event.target 裏面包含的就是 input 的屬性了，咱們google一下 「input type=file」，找到 <input type="file">，能夠找到：
-
-
Supported Common Attributes | accept, multiple, required
IDL attributes | files and valuegit
Additional attributes In addition to the common attributes shared by all <input> elements, inputs of type file also support: files A FileList object that lists every selected file. This list has no more than one member unless the multiple attribute is specified.
- 上面的話的意思是什麼？首先咱們知道 input 元素能夠獲取的類型有 值類型 和 文件類型，這兩種類型擁有一些通用的屬性，可是，當 input 獲取的元素爲 文件類型的時候，會擁有 文件類型特有的屬性--文件集合屬性（也就是咱們要找的東西），其中，每一個文件擁有的屬性就是文件屬性
- 結合上面對 vue.js 模版語法的分析 和 input元素、原生DOM事件（event）的瞭解，咱們對客戶端的 js文件 進行更新
client/js/signup.jsgithub
var host = 'http://127.0.0.1:3000/';
var signup_container = new Vue({
el: '#signup-container',
data: {
name_signin: '',
password_signin: '',
name: '',
password: '',
repassword: '',
firstname: '',
lastname: '',
birthday: '',
sexs: ['male', 'female'],
currentSex: 'male',
ages: ['1', '2', '3', '4', '5', '6', '7', '8',
'9', '10', '11', '12', '13', '14', '15', '16', '17', '18'],
currentAge: '18',
wechart: '',
qq: '',
email: '',
contury: '',
address: '',
phone: '',
websize: '',
github: '',
bio: '',
commits: null,
pagestate: '0',
image: ''
},
methods: {
filesChange: function(event) {
this.image = event.target.files[0].name
},
return_index: function () {
this.pagestate = '0'
},
signin_index: function () {
this.pagestate = '1'
},
signup_index: function () {
this.pagestate = '2'
},
signin: function () {
//當點擊登錄的時候，在頁面上渲染從服務端返回的數據，把其餘的部分隱藏掉
this.pagestate = '3'
var xhr = new XMLHttpRequest()
var self = this
xhr.open('GET', host + 'signin?' + 'name=' + self.name_signin + '&password=' + self.password_signin, true)
xhr.onload = function () {
//self.commits = xhr.responseText
var myObj = JSON.parse(xhr.responseText);
self.commits = myObj
}
xhr.send()
},
addUser: function () {
//當點擊註冊的時候，在頁面上渲染從服務端返回的數據，把其餘的部分隱藏掉
this.pagestate = '3'
var xhr = new XMLHttpRequest()
var self = this
xhr.open('GET', host + 'signup?' + 'name=' + self.name + '&password=' + self.password + '&firstname=' +
self.firstname + '&lastname=' + self.lastname + '&birthday=' + self.birthday
+ '&sex=' + self.currentSex + '&age=' + self.currentAge + '&wechart=' + self.wechart
+ '&qq=' + self.qq + '&email=' + self.email + '&contury=' + self.contury
+ '&address=' + self.address + '&phone=' + self.phone + '&websize=' + self.websize
+ '&github=' + self.github + '&bio=' + self.bio, true)
xhr.onload = function () {
self.commits = xhr.responseText
}
xhr.send()
}
}
})
- 更新的部分以下：
client/js/signup.jsweb
filesChange: function(event) {
this.image = event.target.files[0].name
}
- 如今，打開瀏覽器，輸入 127.0.0.1:3000/app.html，點擊 signin 按鈕
- 輸入帳號：ArthurSlog 密碼：ArthurSlog，點擊登錄
- 成功登錄以後，點擊 「選擇文件」 按鈕，選擇一張你電腦裏的圖片，而後點擊「打開」
- 此時，若是正常執行，你會看到 「Uploading 你選擇的圖片的名稱 files...」
- 至此，咱們完成了第一步 「1. 點擊選擇按鈕，彈出本地文件瀏覽框以後，選擇咱們要的圖片，而後點擊確認，鎖定咱們要的圖片」。
歡迎關注個人微信公衆號 ArthurSlog
若是你喜歡個人文章 歡迎點贊 留言
謝謝
相關文章
- 1. 支配vue框架初階項目之博客網站-註冊功能
- 2. 支配vue框架初階項目之博客網站-登錄功能
- 3. Slog50_支配vue框架初階項目之博客網站-單頁-客戶端（瀏覽器）更新頭像2
- 4. Slog42_支配vue框架初階項目之博客網站-單頁-默認頭像的佈局和定位
- 5. Slog29_支配vue框架初階項目之博客網站-註冊頁面-單選按鈕
- 6. Slog36_支配vue框架初階項目之博客網站-註冊頁面-合併登錄和註冊頁面
- 7. Slog30_支配vue框架初階項目之博客網站-註冊頁面-選擇框
- 8. Slog34_支配vue框架初階項目之博客網站-註冊頁面-先後端的數據交互
- 9. Slog33_支配vue框架初階項目之博客網站-註冊頁面-數據關聯
- 10. Slog31_支配vue框架初階項目之博客網站-註冊頁面-風格
- 更多相關文章...
- • ionic 表單和輸入框 - ionic 教程
- • PHP 文件上傳 - PHP教程
- • 互聯網組織的未來：剖析GitHub員工的任性之源
- • 適用於PHP初學者的學習線路和建議
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 支配vue框架初階項目之博客網站-註冊功能
- 2. 支配vue框架初階項目之博客網站-登錄功能
- 3. Slog50_支配vue框架初階項目之博客網站-單頁-客戶端（瀏覽器）更新頭像2
- 4. Slog42_支配vue框架初階項目之博客網站-單頁-默認頭像的佈局和定位
- 5. Slog29_支配vue框架初階項目之博客網站-註冊頁面-單選按鈕
- 6. Slog36_支配vue框架初階項目之博客網站-註冊頁面-合併登錄和註冊頁面
- 7. Slog30_支配vue框架初階項目之博客網站-註冊頁面-選擇框
- 8. Slog34_支配vue框架初階項目之博客網站-註冊頁面-先後端的數據交互
- 9. Slog33_支配vue框架初階項目之博客網站-註冊頁面-數據關聯
- 10. Slog31_支配vue框架初階項目之博客網站-註冊頁面-風格