代码之家  ›  专栏  ›  技术社区  ›  Saravana

拖放文件上载在Firefox中不工作

  •  -1
  • Saravana  · 技术社区  · 6 年前

    我正在尝试在我的网站上集成文件上传和浏览和拖放选项。下面的代码文件上传选项在Chrome中运行良好 不在Firefox浏览器中工作。 我试了很多文章。但我在玩这个。有人帮我解决这个问题。事先谢谢。

    var imageLoader = document.getElementById('filePhoto');
    imageLoader.addEventListener('change', handleImage, false);
    
    function handleImage(e) {
        var reader = new FileReader();
        reader.onload = function(event) {
            $('#uploader img').attr('src', event.target.result);
        }
        reader.readAsDataURL(e.target.files[0]);
        $('#cancel_file').show();
    }
    
    var dropbox;
    dropbox = document.getElementById("uploader");
    dropbox.addEventListener("dragenter", dragenter, false);
    dropbox.addEventListener("dragover", dragover, false);
    dropbox.addEventListener("drop", drop, false);
    
    function dragenter(e) {
        e.stopPropagation();
        e.preventDefault();
    }
    
    function dragover(e) {
        e.stopPropagation();
        e.preventDefault();
    }
    
    function drop(e) {
        e.stopPropagation();
        e.preventDefault();
        //you can check e's properties
        //console.log(e);
        var dt = e.dataTransfer;
        var files = dt.files;
    
        //this code line fires your 'handleImage' function (imageLoader change event)
        imageLoader.files = files;
    }
    $('#cancel_file').click(function(e) {
        $('.fimg').attr('src', "https://i.imgur.com/j0KblIu.png");
        $('#cancel_file').hide();
    });
    #uploader {
      position: relative;
      overflow: hidden;
      width: 300px;
      height: 350px;
      background: transparent;
      border: 2px dashed #e8e8e8;
      cursor: pointer;
      padding: 5px;
      color: #555;
      font-family: 'Segoe UI';
      font-weight: bold;
    } 
    #uploader p {
      padding: 30px;
      text-align: center;
      position: relative;
      font-size: 25px;
      color: #000;
      top: 56px;
    }	
    #filePhoto {
      display: none;
    }    
    #uploader img {
      position: absolute;
      width: 100%;
      height: 362px;
      top: -1px;
      left: -1px;
      z-index: -1;
      border: none;
      background-color: #eee;
    }
    <div id="uploader" onclick="$('#filePhoto').click()">
        <p> click here or drag here to upload image</p>
        <img class="fimg" src="https://i.imgur.com/j0KblIu.png" />
    </div>
    <input type="file" name="userprofile_picture" id="filePhoto" />
    <button type="button" id="cancel_file" style="display: none;">Cancel</button>
    
    
    <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
       
    1 回复  |  直到 6 年前
        1
  •  1
  •   Nidhi    6 年前

    可能是 imageLoader.files = files; 不要在中触发“更改事件” firefox 以便在 drop function 对我有用,你可以试试这个

    var imageLoader = document.getElementById('filePhoto');
    imageLoader.addEventListener('change', handleImage, false);
    
    function handleImage(e) {
        var reader = new FileReader();
        reader.onload = function(event) {
            $('#uploader img').attr('src', event.target.result);
        }
        reader.readAsDataURL(e.target.files[0]);
        $('#cancel_file').show();
    }
    
    var dropbox;
    dropbox = document.getElementById("uploader");
    dropbox.addEventListener("dragenter", dragenter, false);
    dropbox.addEventListener("dragover", dragover, false);
    dropbox.addEventListener("drop", drop, false);
    
    function dragenter(e) {
        e.stopPropagation();
        e.preventDefault();
    }
    
    function dragover(e) {
        e.stopPropagation();
        e.preventDefault();
    }
    
    function drop(e) {
        e.stopPropagation();
        e.preventDefault();
        //you can check e's properties
        //console.log(e);
        var dt = e.dataTransfer;
        var files = dt.files;
        //this code line fires your 'handleImage' function (imageLoader change event)
        
        imageLoader.files = files;
        
        // Create a new 'change' event
        var event = new Event('change');
        // Dispatch it.
        imageLoader.dispatchEvent(event);
    
    }
    $('#cancel_file').click(function(e) {
        $('.fimg').attr('src', "https://i.imgur.com/j0KblIu.png");
        $('#cancel_file').hide();
    });
    #uploader {
      position: relative;
      overflow: hidden;
      width: 300px;
      height: 350px;
      background: transparent;
      border: 2px dashed #e8e8e8;
      cursor: pointer;
      padding: 5px;
      color: #555;
      font-family: 'Segoe UI';
      font-weight: bold;
    } 
    #uploader p {
      padding: 30px;
      text-align: center;
      position: relative;
      font-size: 25px;
      color: #000;
      top: 56px;
    }	
    #filePhoto {
      display: none;
    }    
    #uploader img {
      position: absolute;
      width: 100%;
      height: 362px;
      top: -1px;
      left: -1px;
      z-index: -1;
      border: none;
      background-color: #eee;
    }
    <div id="uploader" onclick="$('#filePhoto').click()">
        <p> click here or drag here to upload image</p>
        <img class="fimg" src="https://i.imgur.com/j0KblIu.png" />
    </div>
    <input type="file" name="userprofile_picture" id="filePhoto" />
    <button type="button" id="cancel_file" style="display: none;">Cancel</button>
    
    
    <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>