input 檔案上傳的一些操作
阿新 • • 發佈：2018-11-09
檔案的上傳平常使用input type=“file”使用 不過這預設太醜了 我們可以呼叫一下點選
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> span{ display: inline-block; width: 100px; height: 30px; line-height: 30px; border-radius: 8px; overflow: hidden; text-align: center; color: white; background: red; margin: 200px } </style> </head> <body> <input type="file"> <span>上傳</span> </body> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script> </script> </html>
簡單配置一下結構 用jq寫簡單事件還是很舒服的
在js中繫結事件
$('span').click(function(){
$('input').click() =>點選span 觸發點選 input 我們可以把input設定成display none 就相當於 點選span上傳檔案了
})
新建一個img標籤
<input type="file"> <span>上傳</span> <img src="" alt=""> 不標記src
介紹一下window.URL
URL物件是硬碟（SD卡等）指向檔案的一個路徑，如果我們做檔案上傳的時候，想在沒有上傳伺服器端的情況下看到上傳圖片的效果圖的時候就可是以通過var url=window.URL.createObjectURL(obj.files[0]);獲得一個http格式的url路徑，這個時候就可以設定到中顯示了。
$('src').attr({'src':window.URL.createObjectURL(obj.files[0])})
這樣圖片就能顯示了嗎？ 答案是不行
在網頁載入的時候已經判斷了 window下的URL 狀態，因此在我們上傳的時候需要再次判斷，通過input的change方法
$('input').change(function(ev){ =>可能看起來會有點懵 這裡是呼叫了change 然後又呼叫了一個函式
=>所以此處引數稍微有點變化
var files = ev.target.files;
var url=window.URL.createObjectURL(files[0])
$('img').attr({'src':url})
})
接下來看個簡單的 直接呼叫
<input type="file" onchange="change(this)"> =>直接繫結函式 注意一定要加引數 要獲取資料嘛
<span>上傳</span>
<img src="" alt="">
在js中定義方法
function change(e){
}
然後開始編輯
function change(e){
var files=e.files
$('img').attr({'src':window.URL.createObjectURL(files[0])}) =>這樣就可以獲取到路徑了
}
前面兩種方法都可以 直接引用方法 獲取資料不需要加target 然後通過呼叫change方法需要加上target
得到資料之後就能得到更多的資料啦 比如說檔案大小
function change(e){
var files=e.files
console.log(e.files[0].size)
$('img').attr({'src':window.URL.createObjectURL(files[0])})
}
獲取檔案更多資料 慢慢列印琢磨吧！！！