整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
本文已經(jīng)過原作者 Tapas Adhikary 授權(quán)翻譯
上傳文件功能可以說是項(xiàng)目經(jīng)常出現(xiàn)的需求。從在社交媒體上上傳照片到在求職網(wǎng)站上發(fā)布簡歷，文件上傳無處不在。在本文中，我們將討論 HTML文件上傳支持的10種用法，希望對你有用。
我們可以將input 類型指定為file，以在Web應(yīng)用程序中使用文件上傳功能。
<input type="file" id="file-uploader">
input filte 提供按鈕上傳一個或多個文件。默認(rèn)情況下，它使用操作系統(tǒng)的本機(jī)文件瀏覽器上傳單個文件。成功上傳后，F(xiàn)ile API 使得可以使用簡單的 JS 代碼讀取File對象。要讀取File對象，我們需要監(jiān)聽 change事件。
首先，通過id獲取文件上傳的實(shí)例:
const fileUploader = document.getElementById('file-uploader');
然后添加一個change 事件偵聽器，以在上傳完成后讀取文件對象， 我們從event.target.files屬性獲取上傳的文件信息：
fileUploader.addEventListener('change', (event) => {
const files = event.target.files;
console.log('files', files);
});
在控制臺中觀察輸出結(jié)果，這里關(guān)注一下FileList數(shù)組和File對象，該對象具有有關(guān)上傳文件的所有元數(shù)據(jù)信息。
如果大家看到這里，有點(diǎn)激動，想手賤一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/rNLOyRm
如果我們想上傳多個文件，需要在標(biāo)簽上添加 multiple 屬性：
<input type="file" id="file-uploader" multiple />
現(xiàn)在，我們可以上傳多個文件了，以前面事例為基礎(chǔ)，選擇多個文件上傳后，觀察一下控制臺的變化：
如果大家看到這里，有點(diǎn)激動，想手賤一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/MWeamYp
每當(dāng)我們上傳文件時，File對象都有元數(shù)據(jù)信息，例如file name，size，last update time，type 等等。這些信息對于進(jìn)一步的驗(yàn)證和特殊處理很有用。
const fileUploader = document.getElementById('file-uploader');
// 聽更 change 件并讀取元數(shù)據(jù)
fileUploader.addEventListener('change', (event) => {
// 獲取文件列表數(shù)組
const files = event.target.files;
// 遍歷并獲取元數(shù)據(jù)
for (const file of files) {
const name = file.name;
const type = file.type ? file.type: 'NA';
const size = file.size;
const lastModified = file.lastModified;
console.log({ file, name, type, size, lastModified });
}
});
下面是單個文件上傳的輸出結(jié)果：
如果大家看到這里，有點(diǎn)激動，想手賤一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/gOMaRJv
我們可以使用accept屬性來限制要上載的文件的類型，如果只想上傳的文件格式是 .jpg，.png 時，可以這么做：
<input type="file" id="file-uploader" accept=".jpg, .png" multiple>
在上面的代碼中，只能選擇后綴是.jpg和.png的文件。
如果大家看到這里，有點(diǎn)激動，想手賤一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/OJXymRP
成功上傳文件后顯示文件內(nèi)容，站在用戶的角度上，如果上傳之后，沒有一個預(yù)覽的，就很奇怪也不體貼。
我們可以使用FileReader對象將文件轉(zhuǎn)換為二進(jìn)制字符串。然后添加load 事件偵聽器，以在成功上傳文件時獲取二進(jìn)制字符串。
// FileReader 實(shí)例
const reader = new FileReader();
fileUploader.addEventListener('change', (event) => {
const files = event.target.files;
const file = files[0];
reader.readAsDataURL(file);
reader.addEventListener('load', (event) => {
const img = document.createElement('img');
imageGrid.appendChild(img);
img.src = event.target.result;
img.alt = file.name;
});
});
如果大家看到這里，有點(diǎn)激動，想手賤一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/zYBvdjZ
如果用戶上傳圖片過大，為了不讓服務(wù)器有壓力，我們需要限制圖片的大小，下面是允許用戶上傳小于 1M 的圖片，如果大于 1M 將上傳失敗。
fileUploader.addEventListener('change', (event) => {
// Read the file size
const file = event.target.files[0];
const size = file.size;
let msg = '';
// 檢查文件大小是否大于1MB
if (size > 1024 * 1024) {
msg = `<span style="color:red;">The allowed file size is 1MB. The file you are trying to upload is of ${returnFileSize(size)}</span>`;
} else {
msg = `<span style="color:green;"> A ${returnFileSize(size)} file has been uploaded successfully. </span>`;
}
feedback.innerHTML = msg;
});
如果大家看到這里，有點(diǎn)激動，想手賤一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/pobjMKv
更好的用戶體驗(yàn)是讓用戶知道文件上傳進(jìn)度，前面我們用過了FileReader以及讀取和加載文件的事件。
const reader = new FileReader();
FileReader還有一個progress 事件，表示當(dāng)前上傳進(jìn)度，配合HTML5的progress標(biāo)簽，我們來模擬一下文件的上傳進(jìn)度。
reader.addEventListener('progress', (event) => {
if (event.loaded && event.total) {
// 計算完成百分比
const percent = (event.loaded / event.total) * 100;
// 將值綁定到 `progress`標(biāo)簽
progress.value = percent;
}
});
如果大家看到這里，有點(diǎn)激動，想手賤一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/eYzpwYj
我們可以上傳整個目錄嗎?嗯，這是可能的，但有一些限制。有一個叫做webkitdirectory的非標(biāo)準(zhǔn)屬性(目前只有谷歌瀏覽器還有Microsoft Edge支持按照文件夾進(jìn)行上傳)，它允許我們上傳整個目錄。
目前只有谷歌瀏覽器還有Microsoft Edge支持按照文件夾進(jìn)行上傳，具體可以看下百度云盤的網(wǎng)頁版的上傳按鈕，在火狐下就支持按照文件進(jìn)行上傳，而在谷歌和Edge下，就會給用戶提供一個下拉，讓用戶選擇是根據(jù)文件進(jìn)行上傳還是根據(jù)文件夾進(jìn)行上傳。
<input type="file" id="file-uploader" webkitdirectory />
用戶必須需要確認(rèn)才能上傳目錄
用戶單擊“上傳”按鈕后，就會進(jìn)行上傳。這里要注意的重要一點(diǎn)。FileList數(shù)組將以平面結(jié)構(gòu)的形式包含有關(guān)上載目錄中所有文件的信息。對于每個File對象，webkitRelativePath屬性表示目錄路徑。
例如，上傳一個主目錄及其下的其他文件夾和文件：
現(xiàn)在，F(xiàn)ile 對象將將webkitRelativePath填充為：
如果大家看到這里，有點(diǎn)激動，想手賤一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/dyXYRKp
不支持文件上傳的拖拽就有點(diǎn) low 了，不是嗎?我們來看看如何通過幾個簡單的步驟實(shí)現(xiàn)這一點(diǎn)。
首先，創(chuàng)建一個拖放區(qū)域和一個可選的區(qū)域來顯示上傳的文件內(nèi)容。
<div id="container">
<h1>Drag & Drop an Image</h1>
<div id="drop-zone">
DROP HERE
</div>
<div id="content">
Your image to appear here..
</div>
</div>
通過它們各自的ID獲取dropzone和content 區(qū)域。
const dropZone = document.getElementById('drop-zone');
const content = document.getElementById('content');
添加一個dragover 事件處理程序，以顯示將要復(fù)制的內(nèi)容的效果:
dropZone.addEventListener('dragover', event => {
event.stopPropagation();
event.preventDefault();
event.dataTransfer.dropEffect = 'copy';
});
接下來，我們需要一個drop事件監(jiān)聽器來處理。
dropZone.addEventListener('drop', event => {
// Get the files
const files = event.dataTransfer.files;
});
如果大家看到這里，有點(diǎn)激動，想手賤一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/ExyVoXN
有一個特殊的方法叫做URL.createobjecturl()，用于從文件中創(chuàng)建唯一的URL。還可以使用URL.revokeObjectURL()方法來釋放它。
URL.revokeObjectURL() 靜態(tài)方法用來釋放一個之前已經(jīng)存在的、通過調(diào)用 URL.createObjectURL() 創(chuàng)建的 URL 對象。當(dāng)你結(jié)束使用某個 URL 對象之后，應(yīng)該通過調(diào)用這個方法來讓瀏覽器知道不用在內(nèi)存中繼續(xù)保留對這個文件的引用了。
fileUploader.addEventListener('change', (event) => {
const files = event.target.files;
const file = files[0];
const img = document.createElement('img');
imageGrid.appendChild(img);
img.src = URL.createObjectURL(file);
img.alt = file.name;
});
如果大家看到這里，有點(diǎn)激動，想手賤一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/BazzaoN
無論何時，如果你還想學(xué)習(xí)本文涉及的一些知識，你可以在這里嘗試。
https://html-file-upload.netlify.app/
一步，先寫html或jsp頁面，寫一個form，enctype設(shè)置為multipart/form-data，寫兩個input，一個type為file，一個type為submit，type的值可以用雙引號，也可不用。詳細(xì)代碼如下：<form action="uploadServlet" enctype="multipart/form-data">
<input type="file" name="file">
<input type="submit" value="上傳">
</form>
第二步，在web.xml中設(shè)置servlet和servlet mapping，并在servlet中設(shè)置multipart-config，設(shè)置允許上傳文件的最大長度，注意單位為字節(jié)，樣例中約為10M和20M。
第三步，在servlet中處理文件上傳，使用 request.getPart("file")方法獲取part，再通過part.getSubmittedFileName獲取上傳文件名，使用part.write方法寫文件到服務(wù)中，注意路徑問題，可以直接使用絕對路徑。
對于linux中使用tomcat，可能還需要配置tomcat的servlet.xml中的UMASK="0022"，修改前為0027。
以上便是我分享的內(nèi)容，感謝您的閱讀，非常歡迎并期待您在評論區(qū)留下寶貴的意見和建議。如果你在處理數(shù)據(jù)時遇到了類似的問題，歡迎隨時私信我，我將竭誠為你提供幫助。同時，如果你對數(shù)據(jù)處理領(lǐng)域充滿熱情，也歡迎你與我私信交流，期待與你共同探討、學(xué)習(xí)和進(jìn)步，期待與您的每一次交流。
件上傳是網(wǎng)站開發(fā)中非常常見的功能。這里詳細(xì)講述如何在 Django 中實(shí)現(xiàn)文件的上傳功能。
<form action="" method="post" enctype="multipart/form-data">
<input type="file" name="myfile">
</form>
后端的主要工作是接收文件，然后存儲文件。接收文件的方式跟接收 POST 的方式是一樣的，只不過是通過 FILES 來實(shí)現(xiàn)。示例代碼如下：
def save_file(file):
with open('somefile.txt','wb') as fp:
for chunk in file.chunks():
fp.write(chunk)
def index(request):
if request.method=='GET':
form=MyForm()
return render(request,'index.html',{'form':form})
else:
myfile=request.FILES.get('myfile')
save_file(myfile)
return HttpResponse('success')以上代碼通過 request.FILES 接收到文件后，再寫入到指定的地方。這樣就可以完成一個文件的上傳功能了。
在定義模型的時候，我們可以給存儲文件的字段指定為 FileField，這個 Field 可以傳遞一個 upload_to參數(shù)，用來指定上傳上來的文件保存到哪里。比如我們讓他保存到項(xiàng)目的 files 文件夾下，那么示例代碼如下：
# models.py
class Article(models.Model):
title=models.CharField(max_length=100)
content=models.TextField()
thumbnail=models.FileField(upload_to="files")
# views.py
def index(request):
if request.method=='GET':
return render(request,'index.html')
else:
title=request.POST.get('title')
content=request.POST.get('content')
thumbnail=request.FILES.get('thumbnail')
article=Article(title=title, content=content, thumbnail=thumbnail)
article.save()
return HttpResponse('success')
調(diào)用完 article.save() 方法，就會把文件保存到files下面，并且會將這個文件的路徑存儲到數(shù)據(jù)庫中。
以上我們是使用了 upload_to 來指定上傳的文件目錄。我們也可以指定 MEDIA_ROOT，就不需要在FielField 中指定 upload_to，他會自動的將文件上傳到 MEDIA_ROOT 的目錄下。
MEDIA_ROOT=os.path.join(BASE_DIR,'media')
MEDIA_URL='/media/'然后我們可以在urls.py中添加MEDIA_ROOT目錄下的訪問路徑。示例代碼如下：
from django.urls import path
from front import views
from django.conf.urls.static import static
from django.conf import settings
urlpatterns=[
path('', views.index),
] + static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)
如果我們同時指定MEDIA_ROOT和upload_to，那么會將文件上傳到MEDIA_ROOT下的upload_to文件夾中。示例代碼如下：
class Article(models.Model):
title=models.CharField(max_length=100)
content=models.TextField()
thumbnail=models.FileField(upload_to="%Y/%m/%d/")
如果想要限制上傳的文件的拓展名，那么我們就需要用到表單來進(jìn)行限制。我們可以使用普通的 Form表單，也可以使用 ModelForm，直接從模型中讀取字段。示例代碼如下：
# models.py
class Article(models.Model):
title=models.CharField(max_length=100)
content=models.TextField()
thumbnial=models.FileField(upload_to='%Y/%m/%d/',validators=[validators.FileExtensionValidator(['txt','pdf'])])
# forms.py
class ArticleForm(forms.ModelForm):
class Meta:
model=Article
fields="__all__"
上傳圖片跟上傳普通文件是一樣的。只不過是上傳圖片的時候 Django 會判斷上傳的文件是否是圖片的格式（除了判斷后綴名，還會判斷是否是可用的圖片）。如果不是，那么就會驗(yàn)證失敗。我們首先先來定義一個包含ImageField的模型。示例代碼如下：
class Article(models.Model):
title=models.CharField(max_length=100)
content=models.TextField()
thumbnail=models.ImageField(upload_to="%Y/%m/%d/")因?yàn)橐?yàn)證是否是合格的圖片，因此我們還需要用一個表單來進(jìn)行驗(yàn)證。表單我們直接就使用 ModelForm就可以了。示例代碼如下：
class MyForm(forms.ModelForm):
class Meta:
model=Article
fields="__all__"注意：使用ImageField，必須要先安裝Pillow庫：pip install pillow
利用Ajax上傳文件的好處是上傳文件后無需刷新頁面或調(diào)整即可立即顯示文件上傳信息。
前端
<div>
<input type="file" name="file" id="file_upload">
<input type="button" value="上傳" onclick="FileUpload()">
</div>
<script src="/static/js/jquery-3.2.1.min.js"></script>
<script>
function FileUpload() {
var form_data=new FormData();
var file_info=$( '#file_upload')[0].files[0];
form_data.append('file',file_info);
if(file_info==undefined) { #暫且不許要判斷是否有附件
alert('你沒有選擇任何文件');
return false
}
$.ajax({
url:'/upload_ajax/',
type:'POST',
data: form_data,
processData: false, // tell jquery not to process the data
contentType: false, // tell jquery not to set contentType
success: function(callback) {
console.log('ok')
}
});
}
</script>后端
def upload_ajax(request):
if request.method=='POST':
file_obj=request.FILES.get('file')
import os
f=open(os.path.join(BASE_DIR, 'static', 'pic', file_obj.name), 'wb')
print(file_obj,type(file_obj))
for chunk in file_obj.chunks():
f.write(chunk)
f.close()
print('11111')
return HttpResponse('OK')現(xiàn)在我們在做 web 開發(fā)的時候，基本上都使用前后端分離框架，vue 作為后起之秀，應(yīng)用范圍也是非常廣的。前端示例代碼如下：
<template>
<div>
添加商品<input v-model="name"><br>
價格<input v-model="price"><br>
商品照片<input type="file" id="ssss"><br>
<button @click="add">添加</button>
</div>
</template>
<script>
export default {
name: "addcate",
data:function () {
return{
name:'',
price:'',
}
},
methods: {
add:function () {
var data=new FormData();
data.append('name',this.name);
data.append('price',this.price);
var image=document.getElementById('ssss').files[0];
data.append('file',image);
this.axios({
url:'/api/sadmin/addcate/',
data:data,
method:'post'
}).then((res)=>{
if (res.data.code==200){
this.$router.push({'path':'show'})
}
alert(res.data.message)
}).catch((err)=>{
console.log(err)
})
}
}
}
</script>
<style scoped>
</style>后端示例代碼如下：
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
