Javascript Dropzone.js-显示存储在app_数据文件夹中的图像
我有以下dropzone来显示存储在app_数据文件夹中的图像,但thumnail不起作用,因为app_数据文件夹仅限于web用户 在控制台中,我得到:Javascript Dropzone.js-显示存储在app_数据文件夹中的图像,javascript,asp.net-mvc,dropzone.js,image-upload,Javascript,Asp.net Mvc,Dropzone.js,Image Upload,我有以下dropzone来显示存储在app_数据文件夹中的图像,但thumnail不起作用,因为app_数据文件夹仅限于web用户 在控制台中,我得到: "NetworkError: 404 Not Found - http://localhost:61372/app_data/wallimages/dropzonelayout.png" 我已将图像谨慎地存储在app_数据文件夹中,以限制访问,只有具有特定角色的用户才能编辑上传的文件,如删除等。因此,我的问题是,在这种情况下,如何显示缩略图以
"NetworkError: 404 Not Found - http://localhost:61372/app_data/wallimages/dropzonelayout.png"
我已将图像谨慎地存储在app_数据文件夹中,以限制访问,只有具有特定角色的用户才能编辑上传的文件,如删除等。因此,我的问题是,在这种情况下,如何显示缩略图以编辑上传的文件。我不想使用一些默认图像,因为我已经知道,如果我想将文件存储在app_数据文件夹中,这可能是另一种解决方案
有什么建议吗
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 ActionResult GetAttachments()
{
//从存储库中获取图像列表
var attachmentsList=新列表
{
新的附件模型{AttachmentID=1,FileName=“dropzonelayout.png”,Path=“/app_data/wallmages/dropzonelayout.png”},
新的附件模型{AttachmentID=2,FileName=“imageslider-3.png”,Path=“/app\u data/wallimages/imageslider-3.png”}
}.ToList();
返回Json(新的{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");
}
}
您将需要一个控制器操作来流化映像:
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");
}
}