松鼠的博客

导航

统计

用html实现本地文件的上传

实现本地文件的上传需要使用到HTML5中的File API和FormData对象。以下是一个简单的实现示例:


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>文件上传</title>
</head>
<body>
  <form id="upload-form">
    <label for="file-input">选择文件:</label>
    <input type="file" id="file-input" name="file">
    <br>
    <button type="submit">上传文件</button>
  </form>
  
  <script>
    var form = document.getElementById('upload-form');
    form.addEventListener('submit', function(event) {
      event.preventDefault();  // 阻止表单默认提交
      
      var fileInput = document.getElementById('file-input');
      var file = fileInput.files[0];  // 获取文件对象
      
      var formData = new FormData();
      formData.append('file', file);  // 添加文件到formData对象
      
      var xhr = new XMLHttpRequest();
      xhr.open('POST', 'http://localhost:8080/upload');  // 发送POST请求到上传文件的后台接口
      xhr.send(formData);  // 发送表单数据
      
      xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
          console.log('文件上传成功', xhr.responseText);
        }
      };
    });
  </script>
</body>
</html>

以上代码实现了一个简单的文件上传表单,它包含一个文件选择输入框和一个提交按钮。当用户选择了一个文件并点击了提交按钮,会使用AJAX方式将文件上传到指定的后台接口(这里的接口地址是http://localhost:8080/upload,你需要根据自己的需求修改)。

注意,在示例代码中,我们取消了表单的默认提交行为,使用AJAX发送请求。在表单中使用AJAX发送请求会更加简明且专业(expected),而且还可以较容易地进行前端校验和数据处理。

 

参考文章:http://blog.ncmem.com/wordpress/2023/12/15/%e7%94%a8html%e5%ae%9e%e7%8e%b0%e6%9c%ac%e5%9c%b0%e6%96%87%e4%bb%b6%e7%9a%84%e4%b8%8a%e4%bc%a0/

欢迎入群一起讨论

 

 

posted on   Xproer-松鼠  阅读(111)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· [翻译] 为什么 Tracebit 用 C# 开发
· 腾讯ima接入deepseek-r1,借用别人脑子用用成真了~
· Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
· DeepSeek崛起:程序员“饭碗”被抢,还是职业进化新起点?
· RFID实践——.NET IoT程序读取高频RFID卡/标签
历史上的今天:
2020-12-15 动易CMS粘贴图片自动上传到服务器(Java版)
2020-12-15 织梦CMS粘贴图片自动上传到服务器(Java版)
2020-12-15 帝国CMS粘贴图片自动上传到服务器(Java版)
2020-12-15 PHPCMS粘贴图片自动上传到服务器(Java版)
2020-12-15 dedecms粘贴图片自动上传到服务器(Java版)
2020-12-15 xhEditor粘贴图片自动上传到服务器(Java版)
2020-12-15 CuteEditor粘贴图片自动上传到服务器(Java版)
点击右上角即可分享
微信分享提示