前端上傳那些事

選擇有什麼好講的呢？不就乙個input[type=file]，然後點選就可以了嗎？確實是這樣的，但是，我們想要做得更加的友好一些，比如需要過濾掉非檔案，或只允許從攝像頭拍照獲取等，還是需要進行一些簡單配置的。

"
file
" />

<
input 
type
="file"
accept
="image/*"
>

這樣就可以過濾掉非型別了。但是的型別可能也太多了，有些可能伺服器不支援，所以，如果想保守一些，只允許jpg和png型別，可以寫成這樣：

或者<

在遠古時代，前端並沒有預覽的方法。當時的做法時，使用者選擇之後，立刻把上傳到伺服器，然後伺服器返回遠端的 url 給前端顯示。這種方法略顯麻煩，而且會浪費使用者的流量，因為使用者可能還沒有確定要上傳，你卻已經上傳了。幸好，遠古時代已經離我們遠去了，現代瀏覽器已經實現了前端預覽的功能。常用的方法有兩個，分別是url.createobjecturl()和filereader。雖然他們目前均處在 w3c 規範中的working draft階段, 但是大多數的現代瀏覽器都已經良好的支援。本文只對url.createobjecturl()用法小作介紹

url.createobjecturl()靜態方法會建立乙個domstring，其中包含乙個表示引數中給出的物件的url。這個url的生命週期和建立它的視窗中的document繫結。這個新的url 物件表示指定的file物件或blob物件。用法用下

objecturl = url.createobjecturl(object);

其中，object 引數指用於建立 url 的 file 物件、blob 物件或者 mediasource 物件。對於我們的input[type=file]而言，input.files[0]可以獲取到當前選中檔案的 file 物件。示例**如下：

<
body
>
<
input 
type
="file"
accept
="image/*"
id="input"
/>
<
br/>
<
br/>
<
img 
src=""
title
="hahahah"
alt="暫無"
id="img"
style
="width: 200px; height:200px;font-size: 12px;"
/>
<
script
>
varimg 
=document.getelementbyid(
'img')
varinput 
=document.getelementbyid(
'input')
function
handlerfileshow(e)  } =e
console.log(url.createobjecturl(files[
0]))
img.src 
=files[0] 
?url.createobjecturl(files[
0]) : ""}
input.addeventlistener(
'change
', handlerfileshow, 
false)  
script
>
body
>

前端上傳那些事

前端那些事

前端上傳檔案給後端

阿里oss前端上傳使用

前端上傳那些事

前端那些事

前端上傳檔案給後端

阿里oss前端上傳使用

相關推薦