javascript - 拖放和提交文件以上传

Question

我正在实现拖放 文件，例如this在 ASP.NET MVC 5 中，但我的要求是当我拖动文件时，它不应该立即上传。首先拖动文件，然后单击按钮(“输入元数据”)为每个文件输入一些强制属性(元数据名称、类别等...)，然后点击其他按钮(提交)提交上传。

通常当我们拖动文件时，它会立即上传，我必须停止它并在单击按钮时执行(在填写其他字段后)。甚至任何具有类似功能的第三方 js 库？

我用谷歌搜索了很多但没有得到预期的结果。有人可以指导我如何满足此要求或提供一些链接来满足此要求。

Answer 1

您链接到的示例代码似乎正在使用 jquery.filedrop.js，它是由 Weixi Yen 编写的。您需要从其project home 下载并使用最新版本。为了这个工作。

您还应该下载并使用比与该示例代码捆绑在一起的更高版本的 jquery。我已经用 jquery 1.9.1 对此进行了测试。

要使用您选择的 jquery 扩展，您需要利用 beforeSend 选项，并提供您自己的函数。您还需要存储对为每个文件的自定义函数提供的 done() 函数的引用，以便稍后调用它们，从而上传文件。

如果您希望为每个文件显示元框，则需要在每个文件的基础上附加适当的 html 以允许用户填写它们。

我建议的代码摘要如下:

var uploads_to_call = [];  // the global to store all the file upload callbacks

$('#dropzone').filedrop({
    fallback_id: 'upload_button',   // an identifier of a standard file input element, becomes the target of "click" events on the dropzone
    url: 'upload.php',              // upload handler, handles each file separately, can also be a function taking the file and returning a url
    // other important parameters related to upload, read the documentation for details

    // this is the important custom function you need to supply
    beforeSend: function(file, i, done) {
        // file is a file object
        // i is the file index
        // call done() to start the upload

        // this is just to clone meta boxes for the user to fill in for each file
        // it also fills in the filename so that it's obvious which meta boxes
        // are for which files
        $("#perfile").children().clone()
           .appendTo("#allmeta")
           .children(".filename").html(file.name);

        // this pushes the done() callback into the global mentioned earlier
        // so that we can call it later
        uploads_to_call.push(done);
    },
    afterAll: function() {
        // runs after all files have been uploaded or otherwise dealt with
        // you should possibly put code in here to clean up afterwards
    }
});

// set a handler to upload the files when the submit button is clicked
$("#submit").click(function(){
    $.each(uploads_to_call, function(i, upcall) {
        upcall();
    });
});

使用类似于下面的html:

<form>
    <div id="dropzone"></div>
    <div id="allmeta"></div>
    <button id="submit">submit</button>
</form>

<div id="perfile">
    <div class="meta">
        <span class="filename"></span>
        <input type="text" placeholder="meta"/>
        <input type="text" placeholder="meta"/>
    </div>
</div>

div#perfile 应该有 css 来隐藏它，因为它只用于包含每次拖入文件时要克隆到表单中的 div。

我已经创建了一个概念证明 jsfiddle here ，显然这实际上不允许上传文件，但它显示了 JS 方面的工作。您需要向下滚动到 javascript 面板的底部才能看到自定义代码 - 顶部的内容只包括您应该从项目主页网站下载的 javascript 扩展。

这应该足以让您在 asp.net 方面正常工作。您只需以您认为合适的方式发布用户提供的额外元数据。

显然这是准系统，您应该根据需要充实它。