input-file表单提交及base64转化--封装组件的基础

最新推荐文章于 2024-03-26 17:18:28 发布

原创最新推荐文章于 2024-03-26 17:18:28 发布 · 675 阅读

CC 4.0 BY-SA版权

本文介绍了一个使用HTML和JavaScript实现的文件上传方法。通过FormData对象，可以将选择的文件以multipart/form-data格式发送到服务器，同时展示了如何读取文件内容并进行预处理。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>FormData</title>
</head>
<body>
   <input type="file" onChange="formFileMethod.fileChange(event);">
   <script src="../tool/jquery-2.1.0.js"></script>
   <script>

       class formFile {
           fileChange (e) {
               let fileObj = e.currentTarget.files;
               this.submit(fileObj[0]);
               this.readFile(fileObj[0]);
           }

           submit (file) {
               console.log(file)
               let formdata = new FormData();
               formdata.append("file", file);
               this.request (formdata);
           }

           request (formdata) {
               console.log(formdata.get('file'))
               $.ajax({
                   url: '/path/to/file',
                   type: 'post',
                   processData:false,
   // contentType:'multipart/form-data',
                   headers: {
       "Content-Type": "multipart/form-data"
       },
                   data: formdata,
               })
               .done(function() {
                   console.log("success");
               })
               .fail(function() {
                   console.log("error");
               })
               .always(function() {
                   console.log("complete");
               });
           }

           readFile (file,type) {
               let reader = new FileReader();
               switch (type) {
                   case 'text' :
                   reader.readAsText(file);
                   break;
                   default :
                   reader.readAsDataURL(file);
                   break

               }

               reader.onload = function (e) {
                   console.log(e.target.result)
               }
           }
       }

       let formFileMethod = new formFile();

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