有没有一种方法可以保存单个图像，并防止用户使用dropzone.js放置多个图像

Is there a way to save a single image and to prevent user put more than an image using dropzone.js?

本文关键字：图像 用户 dropzone js 一种 方法 单个 保存 有没有      更新时间：2023-12-25

我正在尝试在数据库中上传图像，我使用的是drobzone.js那是我的控制器代码

[HttpGet]
public ActionResult Show(int? id)
{
    string mime;
    byte[] bytes = LoadImage(id.Value, out mime);
    return File(bytes, mime);
}
[HttpPost]
public ActionResult Upload()
{
    SuccessModel viewModel = new SuccessModel();
    if (Request.Files.Count == 1)
    {
        var name = Request.Files[0].FileName;
        var size = Request.Files[0].ContentLength;
        var type = Request.Files[0].ContentType;
        viewModel.Success = HandleUpload(Request.Files[0].InputStream, name, size, type);
    }
    return Json(viewModel);
}
private bool HandleUpload(Stream fileStream, string name, int size, string type)
{
    bool handled = false;
    try
    {
        byte[] documentBytes = new byte[fileStream.Length];
        fileStream.Read(documentBytes, 0, documentBytes.Length);
        Pictures databaseDocument = new Pictures
        {
            ProfilePicture=documentBytes,
            FName=name,
            Size=size,
            Type=type
        };
        using(var contxt=new EnglisCenterEntities())
        {
            contxt.Pictures.Add(databaseDocument);
            handled = (contxt.SaveChanges() > 0);
        }
    }
    catch (Exception )
    {
        // Oops, something went wrong, handle the exception
    }
    return handled;
}
private byte[] LoadImage(int id, out string type)
{
    byte[] fileBytes = null;
    string fileType = null;
    using(var contxt=new EnglisCenterEntities())
    {
        var databaseDocument = contxt.Pictures.FirstOrDefault(doc => doc.IdPicture == id);
        if (databaseDocument != null)
        {
            fileBytes = databaseDocument.ProfilePicture;
            fileType = databaseDocument.Type;
        }
    }
    type = fileType;
    return fileBytes;
}

这是我的脚本

<script type="text/javascript">
   $(document).ready(function () {
    $("#preview").fadeOut(15);
    $("#refreshButton").click(function () {
        var imageToLoad = $("#imageId").val();
        if (imageToLoad.length > 0) {
            $("#preview").attr("src", "/Document/Show/" + imageToLoad);
            $("#preview").fadeIn();
        }
    });
});

这是我的观点

<form action="/Document/Upload" class="dropzone" id="my-awesome-dropzone"></form>
<input type="text" name="imageId" id="imageId" />
<button type="button" id="refreshButton">Update Image</button>
<img src="/" style="display: none" id="preview" />

它可以处理多个图像，但我想保存单个图像，并防止用户放置多个图像。有没有一种方法可以保存单个图像，并防止用户使用dropzone.js放置多个图像？

需要Javascript来限制maxFiles，请参阅http://www.dropzonejs.com/#configuration-选项和http://jsfiddle.net/P2dTF/2/例如：

Dropzone.autoDiscover = true;
Dropzone.options.my-awesome-dropzone = {
    maxFiles: 1
};
[HttpPost]
public ActionResult Upload(HttpPostedFileBase file)
{
    SuccessModel viewModel = new SuccessModel();
    if (file != null)
    {
        viewModel.Success = HandleUpload(file);
    }
    return Json(viewModel);
}

file的Param名称很重要，dropzone将单个上传绑定到Param文件（将多个上传绑定到文件的Param数组）。不过，不明白为什么需要fileStream，当你想返回一系列字节时需要fileStream，例如，用请求头（音频）进行部分下载，HttpPostedFileBase就可以完成你的任务。

private bool HandleUpload(HttpPostedFileBase file)
{
    bool handled = false;
    try
    {
        byte[] documentBytes = new byte[file.ContentLength];
        Pictures databaseDocument = new Pictures
        {
            ProfilePicture=documentBytes,
            FName=file.FileName,
            Size=file.ContentLength,
            Type=file.ContentType
        };
        using(var contxt=new EnglisCenterEntities())
        {
            contxt.Pictures.Add(databaseDocument);
            handled = (contxt.SaveChanges() > 0);
        }
    }
    catch (Exception )
    {
        // Oops, something went wrong, handle the exception
    }
    return handled;
}
相关文章：