路是方向,代碼是時間,知識需積累,經驗需摸索。希望對大家有用,有錯誤還望指出。
要實現一個文件上傳和下載的頁面,我們需要涉及到 Django 中的以下幾個概念/類/函數:
一、在 models.py 文件中定義一個 File 模型,用于存儲上傳的文件和文件相關信息。
from django.db import models
class File(models.Model):
filename=models.CharField(max_length=100)
file=models.FileField(upload_to='uploads/')
created_at=models.DateTimeField(auto_now_add=True)
代碼中定義了一個名為 File 的模型,包含了文件名、文件、創建時間三個字段,并規定文件上傳到 uploads/ 文件夾下。
二、在 forms.py 文件中,定義一個 FileForm 表單,用于提交文件到后端處理。
from django import forms
from .models import File
class FileForm(forms.ModelForm):
class Meta:
model=File
fields=['filename', 'file']
代碼中定義了一個名為 FileForm 的表單類,它繼承自 Django 的 ModelForm,并以 File 模型為模板。fields 屬性定義了需要提交的字段。class Meta: model=File fields=['filename', 'file']
三、在 views.py 文件中,定義處理文件上傳和下載的視圖函數。
from django.shortcuts import render, redirect
from django.http import FileResponse
from django.views import View
from .models import File
from .forms import FileForm
class FileView(View):
def get(self, request):
files=File.objects.all().order_by('-created_at')
form=FileForm()
return render(request, 'files.html', {'files': files, 'form': form})
def post(self, request):
form=FileForm(request.POST, request.FILES)
if form.is_valid():
form.save()
return redirect('file_list')
else:
return render(request, 'files.html', {'form': form})
class FileDownloadView(View):
def get(self, request, file_id):
file=File.objects.get(pk=file_id)
response=FileResponse(open(file.file.path, 'rb'))
response['Content-Disposition']='attachment; filename=' + file.filename
return response
代碼中定義了兩個視圖函數,一個用于顯示上傳文件列表和提交表單,一個用于下載文件。其中 FileView 用于處理 GET 和 POST 請求,并加載模板 files.html;FileDownloadView 用于下載文件,將文件二進制數據返回給客戶端。
四、定義前端模板,在 templates 目錄下創建名為 files.html 的模板文件,用于顯示上傳文件列表和提交表單。
<h2>Upload File</h2> *****上傳******
<form method="post" enctype="multipart/form-data">
{% csrf_token %}
{{ form.as_p }}
<button type="submit">Upload</button> </form>
<h2>Download Files</h2> *****下載*****
<ul>
{% for file in files %}
<li><a href="{% url 'file_download' file.id %}">{{ file.filename }}</a></li>
{% empty %}
<li>No files found.</li>
{% endfor %} </ul>
代碼中用 html 的 form 標簽以及 Django 的 csrf_token 安全驗證提供了上傳文件的表單。展示已上傳的文件,通過從 model 中獲取數據生成文件列表。
以上是一個實現文件上傳和下載的基本示例,它涉及到了 Django 中的一系列概念、類和函數,其中包括兩個關鍵的視圖函數,即處理文件上傳的 FileView,以及處理文件下載的 FileDownloadView。這兩個視圖函數實現了對于文件的上傳、下載、展示。前端通過 html 文件上傳的表單 形式 提交數據,后端通過 models.Model 和 forms.ModelForm 等定義實現數據存儲和數據處理。最終,前端通過 FileResponse 實現文件下載。
天小編給大家帶來的是html表單提交教程,非常簡單!
話不多說直接進入教程
首先要注意的事項:
第一:因為這節課涉及到了php所以本地要安裝php
在這里小編用的是phpStudyphpStudy(特點簡單很適合本地開發測試)
phpStudy界面
第二:在php編碼里一定要注意不要編寫錯誤
<?php //為開頭 //為結尾?>
<?php 這里寫php代碼 ?>
要切記php代碼要以分號未結束 “;”
首頁我們到我們剛剛安裝的軟件根目錄下,找到www這個文件夾
雙擊打開建立一個新文件夾(在這我命名為了表單的拼音你們可以自己命名為你們想命名的名字,切記不能用中文)
在打開剛剛建立好的文件夾創建兩個文件分別命名為orderform.html和processorder.php(當然你也可以自己取名)
我們用編程軟件打開這兩個新建文件(這里我用的是Sublime Text 3)
我們首先給orderform.html寫下如下代碼
然后我們開始寫建立表單
我們訪問本地連接看一下效果
我們在給php寫入代碼
以下為注意事項
<!--<?php //為php代碼 eoch為輸出代碼 $_POST為接收html提交過來的數據 $tireqty=$_POST['tireqty']
//$sj=$_POST['sj']
//$dz=$_POST['dz'] 為給建立的變量賦值? echo "$tireqty";為輸出這個變量-->
首先我們寫入和html一下的html代碼
在寫入php接收函數
完成效果
以下是html里的代碼
<!DOCTYPE html>
<html>
<head>
<!--這里編碼為utf-8國際編碼-->
<meta charset="utf-8">
<!--這里為網站標題-->
<title>表單</title>
</head>
<body>
<!--action為提交的頁面 method為提交類型 分為兩種一種為post還一種為get -->
<form action="processorder.php" method="post">
<!--border="0"為邊框粗細-->
<table border="0">
<!-- bgcolor="#cccccc"為表格背景顏色這里為灰色 -->
<tr bgcolor="#cccccc">
<td>參數</td>
<!-- aligan="center"為表格居中 -->
<td align="center">數據</td>
</tr>
<tr>
<td>姓名</td>
<!-- <input type="text" name="tireqty" size //這里為type為提交類型
text為文本類型 name為名稱和class一樣 size為字體大小-->
<td align="center"><input type="text" name="tireqty" size="3"/></td>
</tr>
<tr>
<td>手機</td>
<td align="center"><input type="text" name="sj" size="3"/></td>
</tr>
<tr>
<td>地址</td>
<td align="center"><input type="text" name="dz" size="3"/></td>
</tr>
<tr>
<!-- <input type="text" value="提交" value為input 元素的值 colspan為合并-->
<td colspan="0" align="center"><input type="submit" value="提交"/></td>
</tr>
</table>
</form>
</body>
</html>
以下是php中代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>接收</title>
</head>
<body>
<form>
<?php
$tireqty=$_POST['tireqty'];
$sj=$_POST['sj'];
$dz=$_POST['dz'];
?>
<table border="0">
<tr>
<td>參數</td>
<td align="center">數據</td>
</tr>
<tr>
<td>姓名</td>
<td align="center"><?php echo "$tireqty"; ?></td>
</tr>
<tr>
<td>手機</td>
<td align="center"><?php echo "$sj"; ?></td>
</tr>
<tr>
<td>地址</td>
<td align="center"><?php echo "$dz"; ?></td>
</tr>
</table>
</form>
</body>
</html>
謝謝觀看,喜歡的就收藏加關注吧!
pringBoot系列(九)分分鐘解決文件上傳
往期推薦
idea新建springboot項目
SpringBoot系列(二)入門知識講解
SpringBoot系列(三)項目配置文件詳解
Springboot系列(四)web靜態資源配置
SpringBoot筆記(五)Mybatis整合,詳解版
SpringBoot系列(六)thymeleaf完整詳細版
SpringBoot系列(七)Api接口文檔swagger詳解
SpringBoot系列(八) 分分鐘學會SpringBoot多種跨域解決方式
?我們直接創建一個包含web依賴的項目就好了。 然后需要在配置文件配置文件上傳的一些設置。這里使用yml文件作為配置文件,如果不懂語法的,請移步前面的系列三,里面有詳細解釋。
server:
port: 8095
spring:
servlet:
multipart:
max-file-size: 10MB
max-request-size: 30MB
?默認大小為1MB
?除了可以用配置文件配置還可利用java配置,如下
@Bean
public MultipartConfigElement multipartConfigElement() {
MultipartConfigFactory factory=new MultipartConfigFactory();
//上傳的單個文件最大值 KB,MB 這里設置為10MB
DataSize maxSize=DataSize.ofMegabytes(10);
DataSize requestMaxSize=DataSize.ofMegabytes(30);
factory.setMaxFileSize(maxSize);
/// 設置一次上傳文件的總大小
factory.setMaxRequestSize(requestMaxSize);
return factory.createMultipartConfig();
}
?這個方法可以放在啟動類里面,也可以自己放置在一個配置類里面,讓項目啟動的時候能正常加載就行。
?單文件上傳,我們需要用后端接受并將文件存儲到項目里面或者是自己定義路徑。這里以圖片作為上傳的文件。并且將文件上傳到項目里面。
@RestController
@RequestMapping("/file")
public class FileController {
@PostMapping("/uploadFile")
public String uploadFile(MultipartFile file, HttpServletRequest request) {
if (file.isEmpty()){
return "上傳的文件不能為空!請重新上傳";
}
if (file.getSize()<=0){
return "上傳的文件大小需要大于0kb";
}
System.out.println(file.getContentType());//image/png
Date date=new Date();
Long time=date.getTime();
String originFileName=file.getOriginalFilename();//獲取文件原始的名稱
String newFileName=time+originFileName;
//獲取項目運行的絕對路徑
String filePath=System.getProperty("user.dir");
//由于我是創建的多模塊項目,所以獲取到的項目運行路徑為外層的項目路徑,
// 這時候我們就需要在項目相對路徑這里加上項目的名稱demo-upload
String newFilePath=filePath+"\\demo-upload\\src\\main\\resources\\static\\images\\";
//當然你也可以自己設置一個絕對路徑用于圖片上傳,文件上傳。
//比如說:D:\\images\\
File file1=new File(newFilePath);
if (!file1.exists()){
file1.mkdirs();
}
FileOutputStream fileOutputStream=null;
try {
fileOutputStream=new FileOutputStream(newFilePath+newFileName);
fileOutputStream.write(file.getBytes());
fileOutputStream.flush();
fileOutputStream.close();
return "localhost:8095/images/"+newFileName;
} catch (java.io.IOException e) {
e.printStackTrace();
}
return "上傳失敗";
}
}
代碼說明:
?在代碼里,我們可以利用參數file來判斷這個文件是否為空,或者將這個文件的后綴名拿出來,判斷這個文件的類型是否符合我們的要求,利用getContentType() 方法,如果你是上傳的png圖片,那么打印出來的就是image/png 其他類型的圖片就是其他類型。我們為了區分圖片,可以利用當前時間的getTime方法獲得的數字來作為圖片的前綴,也可以用其他的數字或者字符串。都不想說了,碼字太累了。接下來獲取當前項目運行的路徑,由于我是創建的多模塊項目,所以這個獲取的路徑需要再加上項目名稱,后面加上我們需要上傳的文件存儲的位置,一般在resources文件下面。然后判斷這個存儲文件的文件夾是否存在,如果不存在就需要創建一個文件。然后利用字節流,將數據寫到文件中,返回可訪問的路徑。
?前端代碼,我直接在static目錄下面創建了一個upload.html文件,然后我們在文件里面寫入一下內容
<p>單文件上傳</p>
<form action="/file/uploadFile" method="POST" enctype="multipart/form-data">
文件:<input type="file" name="file"/>
<input type="submit" />
</form>
?它的action對應了我們controller里面訪問上傳文件的對應的方法的路徑,method屬性是post,與后端一致。type為file的input框的name屬性需要與controller里面的接受對象MultipartFile 一致,如果不一致的話后端無法接受到數據。如果你已經寫好后端,而前端后端參數不一致,你可以給后端參數加上一個注解。@RequestParam("file") 這個注解放在MultipartFile的前面,這樣即使你的參數名字不是file,也能正確接受到數據。
?將文件上傳之后,那個返回的路徑應該是不能直接訪問到圖片的,會顯示404,我們需可以添加以下配置。
@Configuration
public class ResourceConfigAdapter implements WebMvcConfigurer {
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
//獲取文件的真實路徑
String path=System.getProperty("user.dir")+"\\demo-upload\\src\\main\\resources\\static\\images\\";
String os=System.getProperty("os.name");
if (os.toLowerCase().startsWith("win")) {
registry.addResourceHandler("/images/**").
addResourceLocations("file:" + path);
}
}
}
?這里的java動態配置比利用的yml的配置更靈活,在知道文件要存儲的位置的情況下,可以自己在yml文件里面加配置。然后我們運行項目,如下:
?上傳一張圖片,返回可訪問的路徑
?然后我們將這個URL復制到瀏覽器,運行,就能訪問圖片了。
?這是單文件上傳,然后可能你需要做多文件上傳,很簡單,后端做一個循環就行了,然后利用MultipartFile的數組接受文件,對前端做一點修改。
@PostMapping("/uploadFiles")
public String uploadFiles(MultipartFile[] files,HttpServletRequest request) {
StringBuilder paths=new StringBuilder();
for (MultipartFile file:files) {
//中間的代碼和上面的一樣
try {
//這里根據實際情況修改,可以用數組
paths.append("localhost:8095/images/"+newFileName+"\n");
} catch (java.io.IOException e) {
e.printStackTrace();
}
}
return paths.toString();
}
?前端稍微修改一下
<p>多文件上傳</p>
<form action="/file/uploadFiles" method="POST" enctype="multipart/form-data">
文件:<input type="file" name="files" multiple="multiple"/>
<input type="submit"/>
</form>
?這就完成了多文件的上傳,在上傳的時候你需要按住Ctrl鍵,然后選中多個文件,就能上傳了。
?本文講解了單文件,多文件上傳,然后對文件的上傳限制條件與訪問添加了一些配置。如果你覺得本文對你有用,點個贊,關注表示一下。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。