javascript - 如何让输入文件按钮对从桌面拖放有用，但避免本地重定向

Question

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

我在这里看到了一个类似的问题:Prevent browser from loading a drag-and-dropped file ，但我认为是不同的，因为我的“拖放区”是一个 inputFile 字段。可能他的掉落区域是<分区 >字段，在这种情况下我知道该怎么做。

我已有的代码避免在浏览器中进行本地重定向，并将 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"))

附言。 @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%;
    }

再次感谢!

Answer 1

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

代码如下:

    <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">  
    }

附言。上面的表示法是因为我使用的是 Play Framework，但它与具有 9 个 inputFile 字段的普通表单一样:

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

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

塞巴斯蒂安。