Dropzone.js - 显示存储在 app_data 文件夹中的图像
Dropzone.js - display images stored in app_data folder
我有以下放置区来显示存储在 app_data 文件夹中的图像,但缩略图不起作用,因为 app_data 文件夹仅限网络用户使用。
在控制台中我得到:
"NetworkError: 404 Not Found - http://localhost:61372/app_data/wallimages/dropzonelayout.png"
我特意将图像存储在 app_data 文件夹中以限制访问,只有具有特定角色的用户才能编辑上传的文件,即删除等。所以我的问题是如何在这种情况下显示缩略图用于编辑上传的文件。我不想使用一些默认图像,因为我已经知道如果我想将文件存储在 app_data 文件夹中,这可能是另一种解决方案。
有什么建议吗?
Dropzone.options.dropzoneForm = {
acceptedFiles: "image/*",
init: function () {
var thisDropzone = this;
$.getJSON("/home/GetAttachments/").done(function (data) {
if (data.Data != '') {
$.each(data.Data, function (index, item) {
//// Create the mock file:
var mockFile = {
name: item.AttachmentID,
size: 12345
};
console.log(mockFile);
// Call the default addedfile event handler
thisDropzone.emit("addedfile", mockFile);
// And optionally show the thumbnail of the file:
thisDropzone.emit("thumbnail", mockFile, item.Path);
// If you use the maxFiles option, make sure you adjust it to the
// correct amount:
//var existingFileCount = 1; // The number of files already uploaded
//myDropzone.options.maxFiles = myDropzone.options.maxFiles - existingFileCount;
});
}
});
}
};
这是获取图像的操作:
public ActionResult GetAttachments()
{
//Get the images list from repository
var attachmentsList = new List<AttachmentsModel>
{
new AttachmentsModel {AttachmentID = 1, FileName = "dropzonelayout.png", Path = "/app_data/wallimages/dropzonelayout.png"},
new AttachmentsModel {AttachmentID = 2, FileName = "imageslider-3.png", Path = "/app_data/wallimages/imageslider-3.png"}
}.ToList();
return Json(new { Data = attachmentsList }, JsonRequestBehavior.AllowGet);
}
您将需要一个将流式传输图像的控制器操作:
public class ImagesController : Controller
{
[Authorize] // <!-- You probably want only authenticated users to access this
public ActionResult Thumbnail(string imageName)
{
// TODO: your authorization stuff comes here
// Verify that the currently authenticated user has the required
// permissions to access the requested image
// It is also very important to properly sanitize the imageName
// parameter to avoid requests such as imageName=../../../super_secret.png
var path = Server.MapPath("~/App_Data/" + imageName);
return base.File(path, "image/png");
}
}
现在您可以从客户端使用此 /images/thumbnail?imagename=my_thumbnail.png
操作:
var attachmentsList = new List<AttachmentsModel>
{
new AttachmentsModel
{
AttachmentID = 1,
FileName = "dropzonelayout.png",
Path = Url.Action("thumbnail", "images", new { imagename = "dropzonelayout.png" })
},
new AttachmentsModel
{
AttachmentID = 2,
FileName = "imageslider-3.png",
Path = Url.Action("thumbnail", "images", new { imagename = "imageslider-3.png" })
}
}.ToList();
我有以下放置区来显示存储在 app_data 文件夹中的图像,但缩略图不起作用,因为 app_data 文件夹仅限网络用户使用。
在控制台中我得到:
"NetworkError: 404 Not Found - http://localhost:61372/app_data/wallimages/dropzonelayout.png"
我特意将图像存储在 app_data 文件夹中以限制访问,只有具有特定角色的用户才能编辑上传的文件,即删除等。所以我的问题是如何在这种情况下显示缩略图用于编辑上传的文件。我不想使用一些默认图像,因为我已经知道如果我想将文件存储在 app_data 文件夹中,这可能是另一种解决方案。
有什么建议吗?
Dropzone.options.dropzoneForm = {
acceptedFiles: "image/*",
init: function () {
var thisDropzone = this;
$.getJSON("/home/GetAttachments/").done(function (data) {
if (data.Data != '') {
$.each(data.Data, function (index, item) {
//// Create the mock file:
var mockFile = {
name: item.AttachmentID,
size: 12345
};
console.log(mockFile);
// Call the default addedfile event handler
thisDropzone.emit("addedfile", mockFile);
// And optionally show the thumbnail of the file:
thisDropzone.emit("thumbnail", mockFile, item.Path);
// If you use the maxFiles option, make sure you adjust it to the
// correct amount:
//var existingFileCount = 1; // The number of files already uploaded
//myDropzone.options.maxFiles = myDropzone.options.maxFiles - existingFileCount;
});
}
});
}
};
这是获取图像的操作:
public ActionResult GetAttachments()
{
//Get the images list from repository
var attachmentsList = new List<AttachmentsModel>
{
new AttachmentsModel {AttachmentID = 1, FileName = "dropzonelayout.png", Path = "/app_data/wallimages/dropzonelayout.png"},
new AttachmentsModel {AttachmentID = 2, FileName = "imageslider-3.png", Path = "/app_data/wallimages/imageslider-3.png"}
}.ToList();
return Json(new { Data = attachmentsList }, JsonRequestBehavior.AllowGet);
}
您将需要一个将流式传输图像的控制器操作:
public class ImagesController : Controller
{
[Authorize] // <!-- You probably want only authenticated users to access this
public ActionResult Thumbnail(string imageName)
{
// TODO: your authorization stuff comes here
// Verify that the currently authenticated user has the required
// permissions to access the requested image
// It is also very important to properly sanitize the imageName
// parameter to avoid requests such as imageName=../../../super_secret.png
var path = Server.MapPath("~/App_Data/" + imageName);
return base.File(path, "image/png");
}
}
现在您可以从客户端使用此 /images/thumbnail?imagename=my_thumbnail.png
操作:
var attachmentsList = new List<AttachmentsModel>
{
new AttachmentsModel
{
AttachmentID = 1,
FileName = "dropzonelayout.png",
Path = Url.Action("thumbnail", "images", new { imagename = "dropzonelayout.png" })
},
new AttachmentsModel
{
AttachmentID = 2,
FileName = "imageslider-3.png",
Path = Url.Action("thumbnail", "images", new { imagename = "imageslider-3.png" })
}
}.ToList();