asp.net-mvc - 使用 ASP.NET MVC 的 BlueImp jQuery 上传

Question

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

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

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

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

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

上面 BlueImp 项目中的示例代码处理图像上传，文件存储在服务器上的适当位置，并且 UI 在成功上传后更新，以反射(reflect)用户已上传的图像。

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

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

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

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

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

下面是我的 View 中的模板，它呈现成功上传的图像，这是我希望在“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，传递给 View ，并在调用时返回到上传函数。

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

Answer 1

Issue 1

您可以在呈现“创建”表单时创建一个新的 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
}

Issue 2

同样的技术，只需使用关联的 Guid 而不是创建新的 Guid:

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