前端文件上传功能

最新推荐文章于 2024-05-05 17:04:41 发布

深蓝色的想念

最新推荐文章于 2024-05-05 17:04:41 发布

阅读量627

点赞数

本文链接：https://blog.csdn.net/qq_41727900/article/details/98872581

版权

原生js 做文件上传功能，直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>上传文件</title>
</head>
<body>
    // 单个文件上传
    <div>
        <input type="file" id="file-input" name="fileContent">
        <button id="btn">上传文件</button>
    </div>


    // 如果表单enctype属性设为multipart/form-data,则会使用表单的submit()方法来发送数据，    从而发送数据具有跟FormData同样的格式。
    // 表单上传
    <form enctype="multipart/form-data" method="post" name="fileinfo">
      <label>Your email address:</label>
      <input type="email" autocomplete="on" autofocus name="userid" placeholder="email"     required size="32" maxlength="64" /><br />
      <label>Custom file label:</label>
      <input type="text" name="filelabel" size="12" maxlength="32" /><br />
      <label>File to stash:</label>
      <input type="file" name="file" required />
      <input type="submit" value="Stash the file!" />
    </form>
    <div></div> 
    <script>
        // 单个文件上传
        window.onload = function(){
            var fileInput = document.getElementById('file-input').files;
            var btn = document.getElementById('btn')
            var formData = new FormData(),

            file = fileInput[0];
            formData.append('file', file)
            btn.onclick = function(){
                const xhr = new XMLHttpRequest();
                xhr.open("POST","/import");
                xhr.send(form);
            } 
            } 
        
        

            var form = document.forms.namedItem("fileinfo");
            form.addEventListener('submit', function(ev) {

              var oOutput = document.querySelector("div"),
              oData = new FormData(form);

              oData.append("CustomField", "This is some extra data");

              var oReq = new XMLHttpRequest();
              oReq.open("POST", "stash.php", true);
              oReq.onload = function(oEvent) {
                if (oReq.status == 200) {
                    oOutput.innerHTML = "Uploaded!";
                } else {
                  oOutput.innerHTML = "Error " + oReq.status + " occurred when trying to     upload your             file.<br \/>";
        }
      };

             oReq.send(oData);
             ev.preventDefault();
       }, false);



  
       
    </script>
</body>
</html>