⽹页⽂件上传功能实现的两种⽅式1-------------xhr 实现-----------
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 <title>Document</title>
如何制作网页文件8 <link rel="stylesheet" href="./lib/bootstrap.css" />
9 <script src="./lib/jquery.js"></script>
10 </head>
11 <body>
12 <input type="file" name="" id="file1" />
13 <button id="btn">上传⽂件</button>
14 <!-- 进度条 -->
15 <div class="progress" >
16 <div
17 class="progress-bar progress-bar-striped active"
18
19 id="percent"
20 >
21 0%
22 </div>
23 </div>
24 <br />
25 <img src="" id="img" />
26 <script>
27// -----------111111---------------------
28// 获取上传元素
29 let btn = ElementById("btn");
30 btn.addEventListener("click", function () {
31// 获取⽂件列表利⽤.files属性
32 let files = document.querySelector("#file1").files;
33if (files.length <= 0) {
34return alert("请上传⽂件后点击提交");
35 }
36// ---------222222-------------------------
37// 创建⼀个 formData
38 let fd = new FormData();
39// 往⾥⾯追加⽂件
40 fd.append("avatar", files[0]);
41// -------33333---------------
42// 使⽤xhr 发起⽂件请求
43 let xhr = new XMLHttpRequest();
44// ------------------------------------------
45// 监听 xhr.upload 的 onprogress 事件
46 progress = function (e) {
47if (e.lengthComputable) {
48 let percentComplete = il((e.loaded / e.total) * 100);
49 console.log(percentComplete);
50 $("#percent")
51// 样式
52 .attr("style", "width:" + percentComplete + "%")
53// 设置内容
54 .html(percentComplete + "%");
55 }
56 };
57// -----------------------------------------
58 load = function () {
59 $("#percent")
60// 移除上传中的类样式
61 .removeClass()
62// 添加上传完成的类样式
63 .addClass("progress-bar progress-bar-success");
64 };
65// --------------------------------------
66 xhr.open("POST", "p:3006/api/upload/avatar");
67 xhr.send(fd);
68// ----------监听加载状态-------------------------
69 load = function () {
70if (this.status === 200) {
71 let data = JSON.sponseText);
72 console.log(data);
73if (data.status == 200) {
74 document.querySelector("#img").src =
75 "p:3006" + data.url;
76 } else {
77// 打印错误信息
78 console.ssage);
79 }
80 }
81 };
82 });
83 </script>
84 </body>
85 </html>
2------------ajax 实现----------------
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 <title>Document</title>
8 <script src="./lib/jquery.js"></script>
9 </head>
10 <body>
11 <!-- 结构 -->
12 <input type="file" id="file1" />
13 <button id="btn">上传⽂件</button>
14 <br />
15 <img src="./loading.gif" id="loading" />
16 <!-- js -->
17 <script>
//为上传⽂件按钮添加添加事件
18 $("#btn").on("click", function () {
//获取⽂件的列表并判断有⽆⽂件
19 let files = $("#file1")[0].files;
20if (files.length <= 0) {
21return alert("请上传⽂档再点击哦");
22 }
23//新建formData 存放⽂件
24 let fd = new FormData();
25 fd.append("avartar", files[0]);
26//-------------发起ajax post请求---上传⽂件-----------------
27 $.ajax({
28 type: "POST",
29 url: "p:3006/api/upload/avatar",
30 data: fd,
31// 这两个属性必须要否则会报错------
32 contentType: false,//------------------->注意点
33 processData: false,//---------------------->注意点
34// --------------------
35 success: function (res) {
36 console.log(res);
37 },
38 });
39 });
//当 AJAX 请求开始时，显⽰“加载中”的图⽚
40 $(document).ajaxStart(function () {42 $("#loading").show();
43 });
//当所有 AJAX 请求完成时隐藏加载中的图⽚
44 $(document).ajaxStop(function () {
45 $("#loading").hide();
46 });
47 </script>
48 </body>
49 </html>
发表评论