頁(yè)面如何通過(guò)input標(biāo)簽來(lái)顯示獲取的圖片?
之所想到這個(gè)問(wèn)題是因?yàn)槟炒巫鰟?dòng)畫(huà)的時(shí)候疗认，需要獲取
transform-origin的值，普通的left,right,center,top和bottom已經(jīng)滿足不了需求学歧，就想到了將圖片顯示出來(lái)，獲取點(diǎn)擊的地方占圖片的百分比來(lái)找到變形的中心點(diǎn)
有了這個(gè)想法之后，大致的步驟就出來(lái)了
- 首先在html中寫(xiě)一個(gè)
<input type =" file"/>的標(biāo)簽 - 然后在html中寫(xiě)一個(gè)img標(biāo)簽
- 在JS中獲取input的dom元素惦积，通過(guò)value值來(lái)獲取路徑
- 將路徑放在img的src屬性中
那么問(wèn)題來(lái)了，真的能通過(guò)value的值來(lái)獲取到路徑嗎猛频？
答案是否定的狮崩，不然問(wèn)題也就迎刃而解了不是嗎蛛勉？
這里我們不得不提到一個(gè)問(wèn)題，那就是瀏覽器基于保護(hù)用戶的相關(guān)安全措施睦柴，將真實(shí)路徑隱藏了起來(lái)诽凌，而使用時(shí) fakepath+文件名 的形式來(lái)代替這個(gè)真實(shí)的路徑。
這里然我們來(lái)看個(gè)動(dòng)圖來(lái)看看到底是個(gè)什么鬼
我們能在動(dòng)圖中看到我上傳的圖片明明是 D盤(pán)=》圖片=》p站 這個(gè)目錄下坦敌，最后console.log()出來(lái)的結(jié)果居然是 C:\fakepath\58649812_p1_master1200.jpg
什么鬼侣诵？為什么會(huì)這樣？
其實(shí)我們打印出來(lái)的值狱窘，正是瀏覽器的保護(hù)用戶的相關(guān)措施杜顺，具體情況我也不甚了解，但是我發(fā)現(xiàn)了一個(gè)驚天大秘密训柴。我的IE居然可以通過(guò)這個(gè)方法獲取到圖片哑舒。并且我測(cè)試了IE8,9,10,11。都是可以拿到值的幻馁。
難道修改瀏覽器的某些配置就能獲取到了嗎洗鸵？
根據(jù)我的推測(cè)，應(yīng)該是可以拿到值的仗嗦，但是遨游在英特網(wǎng)的海洋的中膘滨，誰(shuí)會(huì)嫌安全措施多了呢？既然瀏覽器為了用戶安全稀拐，給你禁止了一些功能火邓，自然是為了讓用戶能夠在一個(gè)相對(duì)安全的網(wǎng)絡(luò)環(huán)境中遨游嘛。也許你不知道這些安全措施有多重要德撬，這里小提到一個(gè)跨域問(wèn)題铲咨，后面我會(huì)談到一個(gè)解除瀏覽器的跨域限制，來(lái)讓大家看看安全措施的重要性蜓洪。
那么問(wèn)題又來(lái)了纤勒，既然input獲取不到，又不讓我改瀏覽器隆檀，那到底怎么辦呢摇天？
這里我們用到兩種方式來(lái)解決這個(gè)問(wèn)題
- 通過(guò)ajax傳值到后臺(tái)，后臺(tái)獲取數(shù)據(jù)后拿到文件名恐仑，然后將圖片放到一個(gè)新的路徑下泉坐，將路徑返回給我們的JS，再利用JS來(lái)操作DOM讓圖片顯示出來(lái)（這里我們用php來(lái)舉個(gè)例子）
- 利用H5中的FileReader()對(duì)象
在具體怎么實(shí)現(xiàn)之前裳仆，讓我們來(lái)看看我們從本地拿進(jìn)來(lái)的圖片到底在input的哪里
我們可以看到input這個(gè)對(duì)象下面的files屬性下面有我們想要的文件名腕让，文件格式。
既然已經(jīng)拿到了我們想要的東西歧斟，那么就開(kāi)工了纯丸。
-
通過(guò)ajax加上后臺(tái)來(lái)實(shí)現(xiàn)讓頁(yè)面上顯示圖片
- 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)聽(tīng)input的改變 inputObj.onchange = function(){ // 拿到文件的信息 var pic = inputObj.files[0]; // 創(chuàng)建一個(gè)formData對(duì)象 var formData = new FormData(); // 將文件信息存入這個(gè)對(duì)象中 formData.append('file',pic); // 創(chuàng)建異步對(duì)象 var xhr = new XMLHttpRequest(); // 設(shè)置method和url xhr.open('post','getFilePath.php'); // 發(fā)送請(qǐng)求,將formData這個(gè)對(duì)象傳遞 xhr.send(formData); // 監(jiān)聽(tīng)狀態(tài) xhr.onreadystatechange = function(){ // 如果請(qǐng)求已完成司训，并且成功找到網(wǎng)頁(yè)，就拿到路徑值使用 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;
我去，就為了顯示張圖片而已勾徽，還得需要后臺(tái)來(lái)配合滑凉，太麻煩了。真有種殺豬用了牛刀的感覺(jué)喘帚。想想就覺(jué)得不爽畅姊。所以這里推薦使用FileReader()來(lái)實(shí)現(xiàn)功能
-
通過(guò)FileReader()對(duì)象來(lái)讓頁(yè)面顯示圖片
- 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)聽(tīng)input發(fā)生改變 inputObj.onchange = function(){ // 獲取上傳的文件信息 var pic = inputObj.files[0]; // 創(chuàng)建FileReader對(duì)象 var reader = new FileReader(); // 編碼成Data URL (這一步最為關(guān)鍵) reader.readAsDataURL(pic); // 監(jiān)聽(tīng)上傳完成 reader.onload = function(){ // 拿到base64的路徑 var src = reader.result; // 改變img的src屬性值 imgObj.src=src; } };
這樣一比較，代碼是不是少了很多吹由？根本不需要什么后臺(tái)和ajax若未，就能讓圖片顯示。
這完全可以用在你要上傳圖片的時(shí)候倾鲫，讓圖片預(yù)先在頁(yè)面上預(yù)覽粗合，然后再一次性提交給后臺(tái)。
結(jié)語(yǔ)
- 首先想說(shuō)的是 第一次用markdown寫(xiě)東西乌昔。并不是很會(huì)用隙疚。所以寫(xiě)的排版方面很是奇怪。只是希望看到人不要打我磕道。供屉。。溺蕉。
- 然后 我還在前端這個(gè)泥坑里面摸爬滾打伶丐，所以寫(xiě)的東西有很多不足的地方，如果有什么錯(cuò)誤的地方疯特，還望見(jiàn)諒哗魂。
- 最后想說(shuō)的是 H5 給我們真的提供的不少便利的東西,善用里面的屬性和方法會(huì)給我們的開(kāi)發(fā)帶來(lái)很多的便利。
