asp.net-mvc - 如何在 ASP.Net MVC 中使用 DropZone 显示 PDF 并使其可下载

Question

我在我的 ASP.Net MVC 项目中使用 DropZone 进行文件上传。

一切都很好，可以使用以下代码上传图像/PFD格式文件

这是我的代码

1)View和jQuery上传图片

@if (!Model.GalleryImages.Any())
{
<h3>There are no gallery images for this product.</h3>
}

<form action="/home/SaveGalleryImages" method="post" enctype="multipart/form-data" class="dropzone" id="dropzoneForm">
@Html.HiddenFor(model => model.Id)
<div class="fallback">
<input type="file" name="file" multiple />
<input type="submit" value="Upload" />
</div>
</form>

<br /><br />

@foreach (var image in Model.GalleryImages)
{
<div style="display: inline-block;margin-right: 15px;" class="dropzone">
<img src="/Images/Uploads/Employee/@Model.Id/Gallery/Thumbs/@image" />

@Html.ActionLink("delete", "DeleteImage", "Shop", new { @class = "deleteimage", data_name = image })
</div>
}

<link href="~/Scripts/dropzone/basic.css" rel="stylesheet" />
<link href="~/Scripts/dropzone/dropzone.css" rel="stylesheet" />
@section Scripts{
<script src="~/Scripts/jquery-3.6.0.min.js"></script>

<script src="~/Scripts/dropzone/dropzone.js"></script>

<script type="text/javascript">
$(document).ready(function () {

Dropzone.options.dropzoneForm = {
acceptedFiles: "image/*",
init: function() {
this.on("complete", function (file) {
if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0) {
location.reload();
}
});

this.on("sending", function (file, xhr, formData) {
formData.append("id", @Model.Id);
});
}
};

//////////////////////////////////////////////////////////////


});
</script>

这是动作方法

[HttpPost]


public void SaveGalleryImages(User model)
{
int id = model.Id;
// Loop through files
foreach (string fileName in Request.Files)
{
// Init the file
HttpPostedFileBase file = Request.Files[fileName];

var supportedTypes = new[] { "pdf" };
                var fileExt = System.IO.Path.GetExtension(file.FileName).Substring(1);

// Check it's not null
if (file != null && supportedTypes.Contains(fileExt))
{
// Set directory paths
var originalDirectory = new DirectoryInfo(string.Format("{0}Images\\Uploads", Server.MapPath(@"\")));

string pathString1 = Path.Combine(originalDirectory.ToString(), "Employee\\" + id.ToString() + "\\Gallery");

// Set image paths
var path = string.Format("{0}\\{1}", pathString1, file.FileName);


// Save original and thumb

file.SaveAs(path);
}
else
{
// Set directory paths
var originalDirectory = new DirectoryInfo(string.Format("{0}Images\\Uploads", Server.MapPath(@"\")));

string pathString1 = Path.Combine(originalDirectory.ToString(), "Employee\\" + id.ToString() + "\\Gallery");
string pathString2 = Path.Combine(originalDirectory.ToString(), "Employee\\" + id.ToString() + "\\Gallery\\Thumbs");

// Set image paths
var path = string.Format("{0}\\{1}", pathString1, file.FileName);
var path2 = string.Format("{0}\\{1}", pathString2, file.FileName);

// Save original and thumb

file.SaveAs(path);
                    
WebImage img = new WebImage(file.InputStream);
img.Resize(200, 200);
img.Save(path2);
}

}

}

所以，现在有了上面的代码，我就可以成功上传图片和 PDF 文件了。但是，我希望能够在视图中查看 PDF 文件。

我上面的查看代码只能显示图像，效果很好。但是，我怎样才能显示上传到 Gallery 文件夹中的 PDF？

请建议。

非常感谢您的帮助。

标签： asp.net-mvcasp.net-coredropzone.jsdropzone