整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          用django4、python3、html5、css

          用django4、python3、html5、css3寫出一個文件上傳、下載的頁面

          路是方向,代碼是時間,知識需積累,經驗需摸索。希望對大家有用,有錯誤還望指出。

          要實現一個文件上傳和下載的頁面,我們需要涉及到 Django 中的以下幾個概念/類/函數:

          1. models.Model:定義數據庫模型,存儲文件信息;
          2. forms.ModelForm:定義文件上傳表單,用于提交文件到后端處理;
          3. views.View:處理上傳、下載的邏輯;
          4. HttpResponse:返回下載的文件;
          5. FileField:Django 中的文件上傳字段;
          6. FileResponse:返回文件的 HTTP 響應對象。

          一、在 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多種跨域解決方式

          1.項目搭建與配置

          ?我們直接創建一個包含web依賴的項目就好了。 然后需要在配置文件配置文件上傳的一些設置。這里使用yml文件作為配置文件,如果不懂語法的,請移步前面的系列三,里面有詳細解釋。

          server:
            port: 8095
          
          spring:
            servlet:
              multipart:
                max-file-size: 10MB
                max-request-size: 30MB
          
          • max-file-size 設置能接受的文件最大的大小,記得是MB,或KB
          • max-request-size 設置一次上傳的所有文件的大小。

          ?默認大小為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();
          }
          

          ?這個方法可以放在啟動類里面,也可以自己放置在一個配置類里面,讓項目啟動的時候能正常加載就行。

          2.文件上傳

          ?單文件上傳,我們需要用后端接受并將文件存儲到項目里面或者是自己定義路徑。這里以圖片作為上傳的文件。并且將文件上傳到項目里面。

          @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鍵,然后選中多個文件,就能上傳了。

          3.總結

          ?本文講解了單文件,多文件上傳,然后對文件的上傳限制條件與訪問添加了一些配置。如果你覺得本文對你有用,點個贊,關注表示一下。


          主站蜘蛛池模板: 老湿机一区午夜精品免费福利| 久久精品国产一区二区三| 国产乱码精品一区二区三区中| 午夜视频一区二区| 伊人激情AV一区二区三区| 文中字幕一区二区三区视频播放| 日韩欧美一区二区三区免费观看 | 亚洲一区中文字幕在线电影网| 好吊妞视频一区二区| 无码人妻一区二区三区免费n鬼沢| 精品国产精品久久一区免费式| 久久se精品一区精品二区| 波多野结衣一区二区三区88| 亚洲一区二区三区91| 中文字幕人妻无码一区二区三区| 国产成人高清亚洲一区久久| 亚洲色无码专区一区| 精品无码一区在线观看| 三上悠亚亚洲一区高清| 亚洲精品日韩一区二区小说| 无码精品人妻一区二区三区人妻斩| 成人免费一区二区三区在线观看| 中文字幕视频一区| 亚洲视频一区在线播放| 精品无码人妻一区二区免费蜜桃 | 国产福利电影一区二区三区| 韩国一区二区三区| 国产精品一区二区香蕉| 国产AV天堂无码一区二区三区| 精品国产免费一区二区| 福利一区二区在线| 人妻免费一区二区三区最新| 国产乱码伦精品一区二区三区麻豆| 国产精品无码一区二区三区免费 | 久久国产一区二区三区| 日韩精品视频一区二区三区| 亚洲乱码av中文一区二区| 国产精品538一区二区在线| 精品国产免费一区二区三区 | 一区二区三区视频在线观看| 无码福利一区二区三区|