Question

我编写了一个代码，用于实现文件上传的拖放功能。此代码在Google Chrome，Safari和Firefox中运行良好，但它无法在Microsoft Edge和Internet Explorer中运行。每当我尝试拖动文件时，文件本身都会在浏览器中打开而不是添加文件。我怎样才能解决这个问题？这是代码 -

＆＃13;

 <!DOCTYPE html>
        <html>
        <head>
        <style type="text/css">
        .container{
          background-color:#00B3E6;
          width:800px;
          margin:auto;
          height:450px;
        }
        .header{
          color:white;
          text-align:center;
          padding:20px;
        }
        body{
          color:white;
        }
        
               .zoneupload { position: relative; width: 300px; background: #FFFFFF; border: 5px solid #018fb7; padding: 10px; margin:auto; }
               .zoneupload .fichier { height: 160px; width: 300px; border: none; -webkit-appearance: none; -moz-appearance:none; background: white; margin-top:7px; opacity:0; -moz-opacity:0; }
               .zoneupload small {  position: absolute; margin: -90px 0 0 70px; color:black;}
               .zoneupload #send { position: absolute; right: 6px; bottom: 10px }
               .text{margin:auto; color:white; text-align:center; }
               #linkupload{ margin:auto; width:280px; }
        </style>
        
        </head>
        
        <body>
          <div class="container">
            <h2 class="header"> Zscaler App - Decrypt Logs Utility </h2>
        <fieldset class="zoneupload">
               <form method="post" action="upload.php" name="upload" id="upload" enctype="multipart/form-data">
                       <input type="hidden" name="post" value="file">
                       <input type="file" name="userfile" id="fichier" class="fichier" onchange="display(this)" >
                       <input type="button" value="Upload" id="send" onclick="checkAndSend(this)">
                       <br>
                       <small><b>Browse for file or drop a file</b></small>
               </form>
        </fieldset>
        <br/>
        <p class='text' id="link">Drop in the white area</p>
        <br>
        <p class='text'>or</p>
        <br>
        <form action="linkupload.php" method="post" enctype="muiltipart/form-data" id="linkupload">
        <label><strong>Link:</strong></label> <input type="text" name="link" id="link">
        <input type="button" value="Upload" onclick="checkAndSendLink(this)">
        </form>
        </div>
        <script type="text/javascript">
          function checkAndSend(input){
            var form=document.getElementById('upload');
            if(document.getElementById('fichier').value != ''){
              form.submit();
            }
            else{
              window.alert('Select a file');
            }
          }
        
          function checkAndSendLink(input){
            var form=document.getElementById('linkupload');
            if(document.getElementById('link').value != ''){
              form.submit();
            }else{
              window.alert('link field is empty');
            }
          }
        
          function display(input)
               { 
                var str=input.value;
                str=str.replace('C:\\fakepath\\','')
                document.getElementById('link').innerHTML=str;
               }
        </script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"/>
        <script type="text/javascript">
        
               $(document).on('dragover', '#fichier', function(e) {
                       e.preventDefault();
                       console.log('he');
        
               });
               
        
        </script>
        </body>
        </html>

＆＃13;

我的拖放文件上传在IE和Microsoft Edge浏览器中不起作用

0 个答案: