图片上传（参考...）

最新推荐文章于 2023-03-01 17:21:12 发布

uup-ndd

最新推荐文章于 2023-03-01 17:21:12 发布

阅读量57

点赞数

本文链接：https://blog.csdn.net/weixin_44713446/article/details/90240379

版权

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel="stylesheet" href="/stylesheets/style.css" />
    <%- include('tpl/header') %>
  </head>
  <body>
    <!-- <form
      action="/api/v1/common/upload_file"
      method="post"
      enctype="multipart/form-data"
    >
      <input type="file" name="avatar" />
      <input type="submit" value="提交" />
    </form> -->
    <h1><%= title %></h1>
    <h3><%= descriptions %></h3>
    <p>Welcome to <%= title %></p>
    <a href="/users">用户页面</a>
    <%= c %>
    <hr />
    <%- c %>
    <ul>
      <% people.forEach(item=>{ %>
      <li><%= item.name %></li>
      <%}) %>
    </ul>
    <img
      src="/images/plus.jpg"
      id="img"
      style="width: 200px;height: 200px;"
      alt=""
    />
    <input type="file" id="fileCtrl" style="display:none" /><!-- file上传文件按钮 -->
    <%- include('tpl/footer') %>
    <script src="/js/jquery.min.js"></script>
    <script>
      $(function() {
        $('#img').click(function() {
          $('#fileCtrl').click(); // 弹出图片选择框
          $('#fileCtrl').change(function(e) {
            // console.log(e);
            var file = e.currentTarget.files[0]; // 获取选中的图片
            var formData = new FormData(); // 表单数据
            formData.append('avatar', file); // 通过append插入数据
            $.ajax({
              type: 'post',
              url: '/api/v1/common/upload_file',
              data: formData, // 表示上传的数据
              processData: false, // 上传数据不进行序列化处理
              contentType: false, // 表示不指定传输数据时的请求地格式
              cache: false, // 不做缓存
              beforeSend: function() {
                console.log('....before');
              }, // 请求之前触发
              complete: function() {
                console.warn('请求完成');
              },
              success: function(response) {
                // console.log(response);
                console.log('成功');
                $('#img').attr('src', response.file);
              },
              error: function() {
                console.error('报错了');
              },
            });
          });
        });
      });
    </script>
  </body>
</html>

uup-ndd

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片上传（参考...）

<!DOCTYPE html><html> <head> <title><%= title %></title> <link rel="stylesheet" href="/stylesheets/style.css" /> <%- include('tpl/header') %...
复制链接

扫一扫