用于后端测试，前端ajax上传图片。
> JavaScript通过 new FileReader() 获取图片base64 无组件上传图片
> Vue input上传图片
> 小程序选择、预览、删除、上传图片
Demo:
1. <!DOCTYPE html>
2. <html lang="en">
3.
4. <head>
5. <meta charset="UTF-8">
6. <title>图片上传测试</title>
7. <style>
8. section {
9. width: 1000px;
10. margin: 50px auto;
11. box-shadow: 0 0 5px 5px #eee;
12. padding: 20px 20px 40px;
13. }
14.
15. #api {
16. width: 300px;
17. padding: 10px
18. }
19. </style>
20. </head>
21.
22. <body>
23. <section>
24. <p>输入测试接口:</p>
25. <input type="text" placeholder="https://blog.bg7zag.com" name="api" id="api">
26. <br>
27. <br>
28. <p>form表单提交：</p>
29. <input type="file" name="file" id="img">
30. <br>
31. <br>
32. <p>base64:</p>
33. <input type="file" name="base64" id="base64">
34. <p>输出：</p>
35. <div id="res"></div>
36. </section>
37. <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
38. <script>
39. $('#img').change(function(e) {
40. let file = e.target.files[0];
41. let param = new FormData(); //创建form对象
42. param.append('file', file, file.name); //通过append向form对象添加数据
43. // console.log(file)
44. $.ajax({
45. url: $('#api').val(),
46. type: 'POST',
47. data: param,
48. contentType: false,
49. processData: false,
50. })
51. .done(function(res) {
52. console.log("form-----success");
53. console.log('form:', res)
54. $('#res').text(JSON.stringify(res))
55. })
56. .fail(function() {
57. console.log("form----error");
58. })
59. .always(function() {
60. console.log("form----complete");
61. });
62.
63. });
64.
65. $('#base64').change(function(e) {
66. let file = e.target.files[0]; // 获取图片信息 可以从中获取图片大小
67. let reader = new FileReader();
68. reader.readAsDataURL(file); // 读出 base64
69. reader.onloadend = function() {
70. // 图片的 base64 格式, 可以直接当成 img 的 src 属性值
71. let dataURL = reader.result; // dataURL 为图片 base64 码
72. // 下面逻辑处理
73. $.ajax({
74. url: $('#api').val(),
75. type: 'POST',
76. data: {
77. img: dataURL // img 为后端接收参数
78. },
79. })
80. .done(function(res) {
81. console.log("base64 -- success");
82. console.log('base64:', res)
83. $('#res').text(JSON.stringify(res))
84. })
85. .fail(function() {
86. console.log("base64---error");
87. })
88. .always(function() {
89. console.log("base64----complete");
90. });
91. };
92. });
93. </script>
94. </body>
95.
96. </html>
github: https://github.com/hlbj105/upload-image
coding: https://dev.tencent.com/u/hlbj105/p/upload-image/git
Demo: https://hlbj105.github.io/upload-image/
https://hlbj105.coding.me/upload-image/