使用 jQuery 分配文件输入的文件答案

【问题标题】：Assigning a file input's file with jQuery使用 jQuery 分配文件输入的文件
【发布时间】：2013-04-25 21:04:36
【问题描述】：

我在页面上有一个空的文件输入字段，我想使用 jQuery 填充页面上已经存在的文件。

例如，我有以下链接：

<a href="download.pdf" class="file">Download Me</a>

还有如下形式：

<form>
     <input type="file" value="">
     <input type="submit" value="">
</form>

我想用jQuery来获取链接的href，然后分配给文件上传。我可以通过像这样为 href 分配一个变量来轻松地开始这个：

var download = $("a.file").attr("href");

但是我将如何使用此变量分配文件输入的上传？

【问题讨论】：

嗯，网络上文件的路径与用户将要上传的文件的路径不同（它实际上指向用户的临时 Internet 文件）。在这种情况下，我建议删除文件输入（或给它一个不同的名称或删除它的名称）并使用隐藏输入传递 url。
enctype="multipart/form-data" 一定是您的朋友之一……这看起来像是您想做的事情吗？ stackoverflow.com/questions/15259632/…
这似乎比我想象的要复杂一些。 @Kevin - 我可以传递 URL，但我希望它通过文件附件而不是链接发送。
@TimVermaelen - 我会研究其他答案，看看是否可行
@TimVermaelen 这是否需要编码为 base64 才能发送文件附件？

标签： jquery forms file-upload input

【解决方案1】：

据我了解，您正在尝试做的是“使用表单标签”上传文件输入。然后通过链接填充输入。

HTML

您在表单上启用的内容： http://www.w3.org/TR/html401/types.html#type-content-type

<form method="post" enctype="multipart/form-data">
    <input type="file" value="">
     <input type="submit" value="">
</form>

jQuery

您现在可以使用 jQuery 将它们发送到 AJAX 调用中

/* untested code */
$(function(){
    var uploads = [],
        form = $("form input").eq(0),
        files = $("a.file").prop("href"),
        len = files.length;

    for (var i = 0; i < len; i += 1){
        // inc. validate files
        // inc. validate form data
        // inc. encryption
        form.prop("src", files[i]);
        uploads.push(form);
    }

    // upload form options.data = form
    // http://api.jquery.com/jQuery.ajax/
    $.ajax(options);
});

现在，据我了解，一种更节省的方法是加密您发送的内容，这在安全方面是有意义的。

您不必“使用加密”来测试它。看看它是如何从那里开始的。 upload multiple images with jquery ajax and process them with php

【讨论】：

完美。非常感谢。这正是我需要开始的。