如何使输入文件按钮在从桌面拖放时有用，但避免本地重定向

How to leave input file button usefull for drag and drop from desktop, but avoiding local redirection

本文关键字：有用 重定向 拖放 文件 输入 何使 按钮 桌面      更新时间：2023-09-26

我一直在阅读很多关于拖放和我有一些问题使用html输入文件元素。我想做的是一个有9个字段类型="文件"的表单，并使用它们从桌面使用拖放附加文件。这方面的代码已经完成(因为很多浏览器都支持这种附加方式)，但我试图避免本地重定向，但在途中失败了。使用本地重定向，我的意思是，例如，如果将桌面中的图片放到浏览器中的任何位置(inputFile字段除外)，浏览器将显示位于我的计算机中的图像。

我在这里看到了一个类似的问题:防止浏览器加载拖放文件，但我认为是不同的，因为我的"拖放区域"是一个inputFile字段。可能他的拖放区域是一个<div >字段，在这种情况下，我知道如何做到这一点。

我已经拥有的代码，避免在浏览器中进行本地重定向，并将inputFile字段识别为可拖放区域。问题是，当我将图像从桌面拖放到inputFile字段时，该字段不接收文件(我注意到这一点，因为当它工作时显示了文件的名称)。

有谁能帮帮我吗?对不起，如果这个问题已经回答了，我没有找到答案。提前感谢!

塞巴斯蒂安。

    <script type="text/javascript" >
    $(document).ready(function(){
    var obj = $("#inputFileField");
    obj.on('dragenter', function (e){
        e.stopPropagation();
        e.preventDefault();
        $(this).css('border', '2px solid #0B85A1');
    });
    obj.on('dragover', function (e){
         e.stopPropagation();
         e.preventDefault();
    });
    obj.on('drop', function (e){
         $(this).css('border', '2px dotted #0B85A1');
         e.preventDefault();
         var files = e.originalEvent.dataTransfer.files;
         //We need to send dropped files to Server
         //handleFileUpload(files,obj);
    });
    $(document).on('dragenter', function (e){
        e.stopPropagation();
        e.preventDefault();
    });
    $(document).on('dragover', function (e){
      e.stopPropagation();
      e.preventDefault();
      obj.css('border', '2px dotted #0B85A1');
    });
    $(document).on('drop', function (e){
        e.stopPropagation();
        e.preventDefault();
    });
    });
    </script>

在HTML文件:

    @inputFile(contenedorForm("inputFileField"), '_display -> "Attachment", '_label -> Messages("input File Field"))

p。@inputFile符号是因为我使用Play Framework，但它与html输入文件相同:

    <input type="file" name="input File Field" id="inputFileField">.

在CSS文件中:

    .inputFileField{
    border:2px dotted #0B85A1;
    width:400px;
    color:#92AAB0;
    text-align:left;vertical-align:middle;
    padding:10px 10px 10 10px;
    margin-bottom:10px;
    font-size:200%;
    }

再次感谢!

我找到了一个解决方案，但它只适用于Firefox (mac版25.0.1)。Safari 7.0.2(9537.74.9)和Chrome版本33.0.1750.152使本地重定向当我在inputFile字段上删除文件。

代码如下:

    <script type="text/javascript" >
    flag=false;
    $(document).ready(function(){
       $("#one,#two,#three,#four,#five,
         #six,#seven,#eight,#nine").each(function(){
            $(this).on('dragenter', function (e){
                flag=true;
                e.stopPropagation();
                e.preventDefault();
            });
            $(this).on('dragover', function (e){
                e.stopPropagation();
                e.preventDefault();
            });
            $(this).on('drop', function (e){
                return true;
            });
        });
        $(document).on('dragenter', function (e){
            flag=false;
            e.stopPropagation();
            e.preventDefault();
        });
        $(document).on('dragover', function (e){
            e.stopPropagation();
            e.preventDefault();
        });
        $(document).on('drop', function(e){
            if(flag == true){
                flag=false;
            }
            else{
                e.stopPropagation();
                e.preventDefault();
            }
        });
    });
    </script>

和HTML代码:

    @form(action = routes.controller.upload(), 'id -> "formulario",
       'class -> "form-horizontal",'enctype -> "multipart/form-data"){
       @inputFile(contenedorForm("one"), '_display -> "Attachment",
     '_label ->Messages("1"))
       @inputFile(contenedorForm("two"), '_display -> "Attachment",
     '_label -> Messages("2"))
       @inputFile(contenedorForm("three"), '_display -> "Attachment",
     '_label -> Messages("3"))
       @inputFile(contenedorForm("four"), '_display -> "Attachment",
     '_label -> Messages("4"))
       @inputFile(contenedorForm("five"), '_display -> "Attachment",
     '_label -> Messages("5"))
       @inputFile(contenedorForm("six"), '_display -> "Attachment",
     '_label -> Messages("6"))
       @inputFile(contenedorForm("seven"), '_display -> "Attachment",
     '_label -> Messages("7"))
       @inputFile(contenedorForm("eight"), '_display -> "Attachment",
     '_label -> Messages("8"))
       @inputFile(contenedorForm("nine"), '_display -> "Attachment",
     '_label -> Messages("9"))
         <input type="submit" name="Subir" id="Subir" value="Subir">  
    }

p。上面的符号是因为我使用的是Play框架，但它和普通的9个inputFile字段是一样的:

    <input type="file" name="input File Field" id="inputFileField">

我希望这能对外面的人有用。

塞巴斯蒂安。

相关文章：