基于Python的文件上传代码 + html页面

小蜜蜂vs码农

于 2024-05-06 14:28:38 发布

阅读量1.2k

点赞数 35

文章标签： python html

本文链接：https://blog.csdn.net/xuezhe5212/article/details/138494027

版权

本文介绍了如何使用Python的HTTPServer和BaseHTTPRequestHandler创建一个简单的服务器，支持GET和POST请求，包括文件上传功能以及目录浏览。index.html页面展示了HTML表单用于上传文件，通过AJAX发送POST请求到服务器。

摘要由CSDN通过智能技术生成

编写服务端server.py代码:

from http.server import HTTPServer, BaseHTTPRequestHandler
import os
import urllib
from http import HTTPStatus

# ip, port config
host = ('127.0.0.1', 8888)

class Resquest(BaseHTTPRequestHandler):
   def do_GET(self):
       print(self.path)
       if self.path == '/':
           self.send_response(200)
           self.end_headers()
           f = open("index.html",'r',encoding='utf-8')
           content = f.read()
           content = content.replace(
               '</body>', self.get_directory('.') + '</body>')
           # 里面需要传入二进制数据，用encode()函数转换为二进制数据
           self.wfile.write(content.encode())
       else:
           try:
               path = urllib.parse.unquote(self.path[1:])
               f = open(path, 'rb')
               self.send_response(200)
               self.end_headers()
               self.wfile.write(f.read())
           except FileNotFoundError:
               self.send_response(404)
               self.end_headers()
               self.wfile.write(b'<h1>File Not Found</h1>')

   def do_POST(self):
       self.send_response(200)
       self.end_headers()

       self.parse_query()
       remainbytes = int(self.headers['content-length'])

       fileName = self.queries['fileName'][0]
       if not fileName:
           print("fail to find fn")
           return (False, "Can't find out file name...")

       print(fileName)
       try:
           out = open(fileName, 'wb')
       except IOError:
           return (False, "Can't create file to write, do you have permission to write?")

       out.write(self.rfile.read(remainbytes))
       print('finish')
       out.close()

   def parse_query(self):
       self.queryString = urllib.parse.unquote(self.path.split('?', 1)[1])
       self.queries = urllib.parse.parse_qs(self.queryString)
       print(self.queries)

   def get_directory(self, path) -> str:
       try:
           list = os.listdir(path)
       except OSError:
           self.send_error(
               HTTPStatus.NOT_FOUND,
               "No permission to list directory")
           return None
       list.sort(key=lambda a: a.lower())
       r = []
       displaypath = os.path.abspath(path)
       title = 'Directory listing for %s' % displaypath
       r.append('<h1>%s</h1>' % title)

       for name in list:
           fullname = os.path.join(path, name)
           displayname = linkname = name
           # Append / for directories or @ for symbolic links
           if os.path.isdir(fullname):
               displayname = name + "/"
               linkname = name + "/"
           if os.path.islink(fullname):
               displayname = name + "@"
               # Note: a link to a directory displays with @ and links with /
           r.append('<li><a href="%s">%s</a></li>' % (linkname, displayname))
       # print(''.join(r))
       return ''.join(r)

if __name__ == '__main__':
   server = HTTPServer(host, Resquest)
   print("Starting server, listen at: %s:%s" % host)
   server.serve_forever()

编写index.html页面：

<!DOCTYPE html>
<html>
<head>
   <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.0.js" type="text/javascript"></script>
   
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>

<body>
   <form id="uploadForm" action="/upload" enctype="multipart/form-data" method="post" onsubmit="return submitFile()">
       <div><input type="file" name="file" multiple></div>
       <br>
       <div><input type="submit" value="提交"> </div>
   </form>
   <script>
       function submitFile() {
           // formData = new FormData($('#uploadForm')[0])
           files = $('#uploadForm')[0].file.files
           for (i = 0; i < files.length; i++) {
               $.ajax({
                   url: "/upload?fileName=" + encodeURIComponent(files[i].name),
                   type: "POST",
                   data: files[i],
                   success: function (data) {
                       console.info("success", data);
                       alert("上传成功！")
                       //document.referrer 前一个页面的URL 返回并刷新页面
                       location.replace(document.referrer);
                   },
                   error: function (data) {
                       console.warn("fail", data);
                   },
                   processData: false,
                   contentType: "multipart/form-data",
                   // contentType: "application/octet-stream"
               });
           }
           return false;
       }
   </script>
</body>
</html>