原生js实现文件上传

程序员开心技术 2022年11月21日

0 收藏 752 点赞 4,211 浏览 1223 个字

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Js实现文件上传功能</title>
     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
     <style>
         .a-upload {
             position: relative;
             display: inline-block;
             background: #D0EEFF;
             border: 1px solid #99D3F5;
             border-radius: 4px;
             padding: 4px 12px;
             overflow: hidden;
             color: #1E88C7;
             text-decoration: none;
             text-indent: 0;
             line-height: 20px;
         }
         .a-upload input {
             position: absolute;
             font-size: 100px;
             right: 0;
             top: 0;
             opacity: 0;
         }
         .a-upload:hover {
             background: #AADFFD;
             border-color: #78C3F3;
             color: #004974;
             text-decoration: none;
         }
     </style>
 </head>
 <body>
 <form method="post"
       enctype="multipart/form-data"
       id="upload">
     <a href="javascript:;" rel="external nofollow"    id="pic"    class="a-upload">
         <input type="file"
                name="file"
         >
         点击这里上传文件
     </a>
     <input type="button" value="提交" onclick="uploadPic()">
     <span class="showUrl"></span>
     <img src="" alt="" class="showPic">
 </form>
 </body>
 <script>
     function uploadPic() {
         var form = document.getElementById('upload')
         var formData = new FormData(form);
         $.ajax({
             url:"https://sscpre.boe.com/v1/medical-console/medical/file/upload",
             type:'post',
             data:formData,
             processData:false,
             success:function (res) {
                 if(res){
                     alert('上传成功')
                 }
                 $('#pic').val('');
                 $(".showUrl").html(res);
                 $(".showPic").attr("src",res);
             },
             error:function(err){
                 alert('网络失败，请稍后再试',err)
             }
         })
     }
 </script>
 </html>