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

2023年4月5日 183次阅读

我一直在寻找一个合适的图像上传组件,用于我正在处理的网站,它将支持多个图像上传,能够逐个删除这些单独的上传,一旦上传,并且与.NET MVC很好地配合.

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

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

但是,我确实有两个问题,我正试图解决这个问题.

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

上面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>

任何有关上述两个问题的帮助都将非常感激.

UPDATE
现在使用Darin建议创建Guid,传递给视图,并在调用时返回上传函数来解决问题1.

问题2我已经成功完成了工作,很快就会发布我的解决方案.

最佳答案

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而不是创建一个新的：

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