<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="./CSS/index.css"> <script type="text/javascript" src="./js/jquery-3.3.1.js"></script> <title>Document</title> </head> <body> <div class="divclass"> <button onclick="getLogIn()">log in</button> <hr> <input type="file" id="uploadFile" name="uploadFile" /> <button onclick="addFile()" type="submit">提交</button> <hr> <input type="text" id="downloadfilename"> <button onclick="downloadFile()" target="new target">下载</button> </div> </body> <!-- http://127.0.0.1:8082/localTest/upload --> <!-- http://127.0.0.1:8082/localTest/testDownload --> <script> function getLogIn() { window.location.href = "./pages/login.html"; } function downloadFile() { var filename = document.getElementById("downloadfilename").value; //window.open("http://127.0.0.1:8082/localTest/testDownload?filename=" + encodeURI(filename)); window.open("http://127.0.0.1:8088/api/DownloadByCustomer?filename=" + encodeURI(filename)); } function addFile() { var formData = new FormData(); formData.append("file1", document.getElementById('uploadFile').files[0]); $.ajax({ url: 'http://127.0.0.1:8088/admApi/admUpload', type: 'POST', data: formData, // 上传formdata封装的数据包 //dataType: 'JSON', timeout: 10000, cache: false, // 不缓存 processData: false, // jQuery不要去处理发送的数据 contentType: false, // jQuery不要去设置Content-Type请求头 success: function (res) { console.log(res) console.log("上传成功"); return alert("上传成功"); }, error: function (sd) { console.log(sd) console.log("上传失败"); return alert("上传失败"); } }); }; </script> </html>
时间: 2024-03-04 12:53:45 浏览: 198
HTML中的<meta>标签的使用详解
5星 · 资源好评率100%
这是一个 HTML 页面,包含一个按钮和三个输入框。点击按钮会跳转到 login.html 页面,其中一个输入框可以用来上传文件,另一个输入框可以输入文件名,点击下载按钮会下载指定文件名的文件。其中,上传文件的代码使用了 jQuery 的 ajax 方法,将文件数据包装为 FormData 格式上传。下载文件的代码使用了 window.open 方法,将文件名作为参数拼接在 URL 后面进行下载。页面中的地址都是本地地址,需要根据实际情况进行修改。
阅读全文