使用 ASP.NET MVC 的 BlueImp jQuery 上传

Question

我一直在为我正在开发的网站寻找合适的图片上传组件，该组件将启用多个图片上传，能够在上传后一一删除这些单独的上传，并且与 .NET MVC 配合得很好.

到目前为止我见过的最好的组件是BlueImp's jQuery Upload，并从这里下载了示例 MVC 项目：

https://github.com/maxpavlov/jQuery-File-Upload.MVC3

但是，我确实有 2 个问题需要解决。

问题 1
在我的 Web 应用程序中，用户可以创建一个帖子，并且在他们输入帖子详细信息的同一页面上，在将此帖子提交到留言板之前，他们需要能够上传 1 个或多个图像（使用 jQuery File Upload） .

上面 BlueImp 项目中的示例代码处理图像上传，因为文件存储在服务器上的适当位置，并且 UI 会在成功上传后更新，以反映用户上传的那些图像。

但是，当用户实际提交他们的帖子时，在我的 Controller 的 ActionMethod 中，除了存储正常的帖子详细信息外，我还需要存储用户上传的任何图像的详细信息（更具体地说是文件名）他们的帖子，因此我可以将帖子详细信息与相关的 x 上传图片相关联。

在 ActionMethod 中获取此上传的图像信息以提交帖子的最佳方式是什么？我正在考虑将信息存储在 Session 对象中，然后我可以在“SubmitPost”ActionMethod 中进行嗅探，但如果我能提供帮助，我不喜欢依赖会话，但存在过期问题。我还考虑在数据库中有一个“UploadLog”表，其中包含该用户上传的尚未提交的图像（与帖子一起），但除非我有一些定期运行的内务处理过程，否则这可能会变得混乱?我希望 jQuery Upload 提供的 Request 集合中可能有一些简单的东西，它列出了上传的图像的文件名，或者类似的东西？

问题 2
一旦我解决了上述问题，我希望允许用户编辑他们现有的帖子，其中一些会上传与他们相关的照片。

当他们到达我的编辑帖子页面时，除了使用他们最初提供的帖子详细信息预填充页面上的所有控件之外，我还想显示他们为此帖子上传的图像列表，以及能够要么删除其中任何一个，要么上传其他图片。

我可以在 BlueImp 示例 MVC 项目中看到，对于等待上传的图像和已成功上传的图像都有一个 jQuery 模板，但是我在示例应用程序中看不到如何填充的任何示例这个成功上传的图片列表，在我刚刚描述的“编辑帖子”场景中。

下面是我的视图中的模板，它呈现成功上传的图像，这是我希望在这个“EditPost”场景中重新填充的理想状态。

<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-download fade">
        {% if (file.error) { %}
            <td></td>
            <td class="name"><span>{%=file.name%}</span></td>
            <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
            <td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
        {% } else { %}
            <td class="preview">{% if (file.thumbnail_url) { %}
                <a href="{%=file.url%}" title="{%=file.name%}" rel="gallery" download="{%=file.name%}"><img src="{%=file.thumbnail_url%}"></a>
            {% } %}</td>
            <td class="name">
                <a href="{%=file.url%}" title="{%=file.name%}" rel="{%=file.thumbnail_url&&'gallery'%}" download="{%=file.name%}">{%=file.name%}</a>
            </td>
            <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
            <td colspan="2"></td>
        {% } %}
        <td class="delete">
            <button class="btn btn-danger" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}">
                <i class="icon-trash icon-white"></i>
                <span>{%=locale.fileupload.destroy%}</span>
            </button>
            <input type="checkbox" name="delete" value="1">
        </td>
    </tr>
{% } %}
</script>

对于上述两个问题中的任何一个，我们将不胜感激。

更新
现在使用 Darin 的建议解决了问题 1，即创建一个 Guid，传递给视图，并在调用时返回到上传函数。

问题 2 我现在已经解决了，很快就会发布我的解决方案。

Answer 1

问题 1

您可以在呈现 Create 表单时创建一个新的 Guid。然后，当文件上传时，您会将它们存储在Server.MapPath("~/Files/{xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx}") 文件夹中。然后，当提交表单时，唯一的 Guid 将作为隐藏字段发送，您将能够继续查看用户上传的所有文件的相应文件夹：

public ActionResult Create()
{
    var id = Guid.NewGuid();
    // pass this to the view
}

[HttpPost]
public ActionResult Upload(Guid id)
{
    // store the uploaded file at the specified by the GUID sub-folder
}

问题 2

同样的技术，只是使用关联的 Guid 而不是创建一个新的：

public ActionResult Edit(Guid guid)
{
    // go and fetch all the files that are inside the corresponding folder
}