頁面如何通過input標(biāo)簽來顯示獲取的圖片?
之所想到這個(gè)問題是因?yàn)槟炒巫鰟?dòng)畫的時(shí)候，需要獲取
transform-origin的值，普通的left,right,center,top和bottom已經(jīng)滿足不了需求，就想到了將圖片顯示出來，獲取點(diǎn)擊的地方占圖片的百分比來找到變形的中心點(diǎn)
有了這個(gè)想法之后，大致的步驟就出來了
- 首先在html中寫一個(gè)
<input type =" file"/>的標(biāo)簽 - 然后在html中寫一個(gè)img標(biāo)簽
- 在JS中獲取input的dom元素，通過value值來獲取路徑
- 將路徑放在img的src屬性中
那么問題來了，真的能通過value的值來獲取到路徑嗎？
答案是否定的，不然問題也就迎刃而解了不是嗎？
這里我們不得不提到一個(gè)問題，那就是瀏覽器基于保護(hù)用戶的相關(guān)安全措施，將真實(shí)路徑隱藏了起來，而使用時(shí) fakepath+文件名 的形式來代替這個(gè)真實(shí)的路徑。
這里然我們來看個(gè)動(dòng)圖來看看到底是個(gè)什么鬼
我們能在動(dòng)圖中看到我上傳的圖片明明是 D盤=》圖片=》p站 這個(gè)目錄下，最后console.log()出來的結(jié)果居然是 C:\fakepath\58649812_p1_master1200.jpg
什么鬼？為什么會(huì)這樣？
其實(shí)我們打印出來的值，正是瀏覽器的保護(hù)用戶的相關(guān)措施，具體情況我也不甚了解，但是我發(fā)現(xiàn)了一個(gè)驚天大秘密。我的IE居然可以通過這個(gè)方法獲取到圖片。并且我測試了IE8,9,10,11。都是可以拿到值的。
難道修改瀏覽器的某些配置就能獲取到了嗎？
根據(jù)我的推測，應(yīng)該是可以拿到值的，但是遨游在英特網(wǎng)的海洋的中，誰會(huì)嫌安全措施多了呢？既然瀏覽器為了用戶安全，給你禁止了一些功能，自然是為了讓用戶能夠在一個(gè)相對安全的網(wǎng)絡(luò)環(huán)境中遨游嘛。也許你不知道這些安全措施有多重要，這里小提到一個(gè)跨域問題，后面我會(huì)談到一個(gè)解除瀏覽器的跨域限制，來讓大家看看安全措施的重要性。
那么問題又來了，既然input獲取不到，又不讓我改瀏覽器，那到底怎么辦呢？
這里我們用到兩種方式來解決這個(gè)問題
- 通過ajax傳值到后臺，后臺獲取數(shù)據(jù)后拿到文件名，然后將圖片放到一個(gè)新的路徑下，將路徑返回給我們的JS，再利用JS來操作DOM讓圖片顯示出來（這里我們用php來舉個(gè)例子）
- 利用H5中的FileReader()對象
在具體怎么實(shí)現(xiàn)之前，讓我們來看看我們從本地拿進(jìn)來的圖片到底在input的哪里
我們可以看到input這個(gè)對象下面的files屬性下面有我們想要的文件名，文件格式。
既然已經(jīng)拿到了我們想要的東西，那么就開工了。
-
通過ajax加上后臺來實(shí)現(xiàn)讓頁面上顯示圖片
- HTML部分
<input type="file" > <br /> <img src="" alt="">- JS部分
// 獲取input的dom元素 var inputObj = document.querySelector('input'); // 獲取img的dom元素 var imgObj = document.querySelector('img'); // 監(jiān)聽input的改變 inputObj.onchange = function(){ // 拿到文件的信息 var pic = inputObj.files[0]; // 創(chuàng)建一個(gè)formData對象 var formData = new FormData(); // 將文件信息存入這個(gè)對象中 formData.append('file',pic); // 創(chuàng)建異步對象 var xhr = new XMLHttpRequest(); // 設(shè)置method和url xhr.open('post','getFilePath.php'); // 發(fā)送請求,將formData這個(gè)對象傳遞 xhr.send(formData); // 監(jiān)聽狀態(tài) xhr.onreadystatechange = function(){ // 如果請求已完成，并且成功找到網(wǎng)頁，就拿到路徑值使用 if(xhr.readyState == 4 && xhr.status == 200){ // 獲取返回值 var src = xhr.responseText; // 改變img標(biāo)簽的src值 imgObj.src=src; } }; };- php部分
// 獲取文件名 $fileName = $_FILES['file']['name']; // 獲取暫存的路徑 $tempPath = $_FILES['file']['tmp_name']; // 定義將要保存的路徑 ，你要保證你當(dāng)前文件下有images這個(gè)文件夾 $savePath = 'images/'.$fileName; // 將圖片移動(dòng)到指定位置 move_uploaded_file($tempPath, $savePath); // 返回路徑 echo $savePath;
我去，就為了顯示張圖片而已，還得需要后臺來配合，太麻煩了。真有種殺豬用了牛刀的感覺。想想就覺得不爽。所以這里推薦使用FileReader()來實(shí)現(xiàn)功能
-
通過FileReader()對象來讓頁面顯示圖片
- HTML
<input type="file" name=""> <br /> <img src="" alt="">- JS
// 獲取input的dom元素 var inputObj = document.querySelector('input'); // 獲取img的dom元素 var imgObj = document.querySelector('img'); // 監(jiān)聽input發(fā)生改變 inputObj.onchange = function(){ // 獲取上傳的文件信息 var pic = inputObj.files[0]; // 創(chuàng)建FileReader對象 var reader = new FileReader(); // 編碼成Data URL (這一步最為關(guān)鍵) reader.readAsDataURL(pic); // 監(jiān)聽上傳完成 reader.onload = function(){ // 拿到base64的路徑 var src = reader.result; // 改變img的src屬性值 imgObj.src=src; } };
這樣一比較，代碼是不是少了很多？根本不需要什么后臺和ajax，就能讓圖片顯示。
這完全可以用在你要上傳圖片的時(shí)候，讓圖片預(yù)先在頁面上預(yù)覽，然后再一次性提交給后臺。
結(jié)語
- 首先想說的是 第一次用markdown寫東西。并不是很會(huì)用。所以寫的排版方面很是奇怪。只是希望看到人不要打我。。。。
- 然后 我還在前端這個(gè)泥坑里面摸爬滾打，所以寫的東西有很多不足的地方，如果有什么錯(cuò)誤的地方，還望見諒。
- 最后想說的是 H5 給我們真的提供的不少便利的東西,善用里面的屬性和方法會(huì)給我們的開發(fā)帶來很多的便利。
