Простейший пример загрузки javascript без форм - PullRequest
Новая
       56

Простейший пример загрузки javascript без форм

0 голосов
/ 19 сентября 2019

Я публикую это, потому что было очень трудно найти информацию для моего варианта использования в одном месте.Исходное задание звучало просто: «Как загрузить файл, выбранный с помощью тега ввода типа файла на веб-странице, на простой http-сервер, способный анализировать POST-запросы?».К сожалению, я потратил несколько дней на поиск материалов, которые помогли бы, не заставляя меня использовать формы.

1 Ответ

0 голосов
/ 19 сентября 2019

Я хотел бы предложить то, что я обнаружил в конце, чтобы сделать это, и, надеюсь, это поможет другим.

Полезная информация взята из Загрузка файла без формы https://blog.anvileight.com/posts/simple-python-http-server/ https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

ура

index.html 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="test.js"></script>
</head>
<body>
    <input type="file" name="fileload">
    <button id="bttn">submit</button>
</body>
</html>

test.js 

let run = ()=> {let inpt = document.querySelector("input")
  let f
  inpt.onchange =()=> {
    f = inpt.files[0]
  }
  let btn = document.querySelector("#bttn")
  btn.addEventListener("click",()=> {
    console.log("clc")
    let xmlHttpRequest = new XMLHttpRequest();

    let fileName = f.name
    let target = "http://localhost:8080"
    let mimeType = "text/csv"

    //xmlHttpRequest.open('POST', target, true);
    //xmlHttpRequest.setRequestHeader('Content-Type', mimeType);
    //xmlHttpRequest.setRequestHeader('Content-Disposition', 'attachment; filename="' + fileName + '"');
    //xmlHttpRequest.send(f);
    fetch("http://localhost:8080",{
      method:"POST",
      mode:"cors",
      headers:{
        "Content-type":"text/csv",
        "Content-disposition":`attachment;filename=${fileName}`
      },
      body:f
    }).then(
      res=> {
        console.log(res)  
        res.text()
      }
    ).then(text=> console.log(text))
  })
}
window.onload = ()=> {
  run()
}

pyserv.py 

from http.server import HTTPServer, SimpleHTTPRequestHandler

from io import BytesIO


class TestingRequestHandler(SimpleHTTPRequestHandler):
    def do_GET(self):
        super().do_GET()
    def do_POST(self):
        print("--- headers \n{} ---".format(self.headers))
        print("whole self --\n{}--".format(self))
        content_length = int(self.headers['Content-Length'])
        print(self.rfile,"is rfile")
        body = self.rfile.read(content_length)
        print("body is ",body)
        self.send_response(200)
        self.end_headers()
        response = BytesIO()
        response.write(b'This is POST request. ')
        response.write(b'Received: ')
        response.write(body)
        self.wfile.write(response.getvalue())


httpd = HTTPServer(('localhost', 8080), TestingRequestHandler)
httpd.serve_forever()
...