ajax上传图片 form和base64上传 后端上传图片接口测试

ajax上传图片 form和base64上传 后端上传图片接口测试

用于后端测试,前端ajax上传图片。

  1. JavaScript通过 new FileReader() 获取图片base64 无组件上传图片
  2. Vue input上传图片
  3. 小程序选择、预览、删除、上传图片

Demo:

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

github: https://github.com/hlbj105/upload-image

Demo: https://hlbj105.github.io/upload-image/

黄良钵

博客站长,前端开发工程师

Leave a Reply

Your email address will not be published. Required fields are marked *

微信扫一扫

微信扫一扫

微信扫一扫,分享到朋友圈

ajax上传图片 form和base64上传 后端上传图片接口测试
返回顶部
网站稳定运行 : {{ diffYears }}年 零 {{ diffDays }}天 {{ diffHours }} 小时 {{ diffMinutes }} 分钟 {{ diffSeconds }} 秒

显示

忘记密码?

显示

显示

获取验证码

Close