图片上传小助手 前端源码

<!DOCTYPE html>
<html>
<head>
  <title>图片上传小助手</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <style>
    #drop-area {
      border: 2px dashed #ccc;
      border-radius: 5px;
      padding: 25px 5px 25px 5px;
      text-align: center;
      font-family: Arial, sans-serif;
      font-size: 20px;
      margin-top: 50px;
    }
    #drop-area.highlight {
      border-color: purple;
    }
    #result-container {
      margin-top: 20px;
      display: none;
    }
    #result-text {
      margin-bottom: 10px;
      width: 100%;
      height: 100px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-md-6 offset-md-3">
        <h1 class="text-center mt-5">图片上传小助手</h1>
        <div id="drop-area">
          <h3>拖放文件到此处</h3>
          <p>或者点击这里选择文件</p>
          <input type="file" id="fileElem" multiple style="display:none">
          <label class="btn btn-primary" for="fileElem">选择文件</label>
          <div class="mb-3"id="result-container">
            <input id="result-text" readonly type="text" class="form-control" style="height: 2rem;">
            <button class="btn btn-primary" id="copy-button">复制</button>
          </div>

          </div>
        </div>

      </div>
    </div>
  </div>

  <script>
    let dropArea = document.getElementById('drop-area');
    let resultContainer = document.getElementById('result-container');
    let resultText = document.getElementById('result-text');
    let copyButton = document.getElementById('copy-button');
    let fileElem = document.getElementById('fileElem');

    // 阻止浏览器默认打开文件的操作
    dropArea.addEventListener('dragenter', (e) => {
      e.preventDefault();
      dropArea.classList.add('highlight');
    });

    dropArea.addEventListener('dragover', (e) => {
      e.preventDefault();
    });

    dropArea.addEventListener('dragleave', (e) => {
      dropArea.classList.remove('highlight');
    });

    dropArea.addEventListener('drop', (e) => {
      e.preventDefault();
      dropArea.classList.remove('highlight');
      let files = e.dataTransfer.files;
      handleFiles(files);
    });

    fileElem.addEventListener('change', (e) => {
      let files = e.target.files;
      handleFiles(files);
    });
    document.addEventListener('paste', (e) => {
  const items = e.clipboardData.items;
  for (let i = 0; i < items.length; i++) {
    const item = items[i];
    if (item.kind === 'file') {
      const file = item.getAsFile();
      handleFiles([file]);
    }
  }
});

    function handleFiles(files) {
      for (let i = 0; i < files.length; i++) {
        const file = files[i];

        // 判断文件类型是否为图片
        if (file.type.startsWith('image/')) {
          console.log(file.name);
          // 这里可以在上传文件之前进行一些其他操作，比如显示文件名、文件大小等

          // 创建一个 FormData 对象，用于将文件数据发送到服务器
          let formData = new FormData();
          formData.append('image', file); // 修改这里的键名为后端接收文件的键名

          // 发送 AJAX 请求
          let request = new XMLHttpRequest();
          request.open('POST', 'https://tstrs.me/img_upload');
          request.setRequestHeader('X-CSRFToken', '{{ csrf_token() }}'); // 添加CSRF令牌到请求头
          request.send(formData);

          // 处理上传成功或失败的响应
          request.onload = function() {
            if (request.status === 200) {
              console.log('文件上传成功！');
              console.log(request.responseText);
              resultText.value = request.responseText;
              resultContainer.style.display = 'block';
            } else {
              console.log(request.responseText);
              console.error('文件上传失败！');
            }
          };
        } else {
          console.warn('只能上传图片文件！');
        }
      }
    }

    copyButton.addEventListener('click', (e) => {
      resultText.select();
      document.execCommand('copy');
    });
  </script>
</body>
</html>
Report abuse