C# 上载图像ASP.NET MVC

嘿，我想上传图片并将图片保存到文件夹中，然后将图片的名称保存到数据库中。此外，我还在表单的其他字段中使用模型绑定。这是这个HttpPostedFileBase文件中的代码。我还在表单中使用enctype=“multipart/form data”

public ActionResult UmrahPackage(PackagesModel model, , HttpPostedFileBase file)
    {
        try
        {
            if (model.ID == 0)
            {
                String fileName = "";
                Pakage pkg = new Pakage();
                pkg.Title = model.Title;
                pkg.PackageDetail = model.PackageDetail;
                pkg.Duration = model.Duration;

                if (file != null)
                {
                    fileName = System.Guid.NewGuid().ToString() + System.IO.Path.GetExtension(file.FileName);
                    string physicalPath = Server.MapPath("~/Images/Uploads" + fileName);
                    // save image in folder
                    file.SaveAs(physicalPath);
                }}

此外，我也尝试了这个，但我不能理解，如何保存在文件夹中的图像，我是指对象实例之前的另存为->文件

if (Request.Files.Count > 0 && String.IsNullOrEmpty(Request.Files[0].FileName) == false)
                {
                    HttpPostedFileBase file;
                    fileName = System.Guid.NewGuid().ToString() + System.IO.Path.GetExtension(Request.Files[0].FileName);
                    string physicalPath = Server.MapPath("/uploads/profileimages/") + fileName;
                    file.SaveAs(physicalPath);
                }

我的表格看起来像

    @using (Html.BeginForm("UmrahPackage", "Home", FormMethod.Post, new { enctype = "multipart/form-data"}))
                {
                    @Html.HiddenFor(model => model.ID)

                    <label>Title:</label>
                    @Html.TextBoxFor(model => model.Title)

                    <label>Upload Image</label>
                    <input type="file" id="imgInp">

                    <button type="submit" >Create</button>
                }

@使用（Html.BeginForm（“UmrahPackage”，“Home”，FormMethod.Post，new{enctype=“multipart/formdata”}））
{
@Html.HiddenFor（model=>model.ID）
标题：
@Html.TextBoxFor（model=>model.Title）
上传图像
创造
}

---

请帮助我，谢谢。

您的输入元素

名称

属性值应与您的参数名称匹配

由于您的

HttpPostedFileBase

参数名是

file

，因此请为您的文件输入提供相同的名称

<input type="file" name="file" />

我引用此选项是为了解决覆盖以前选择的文件的问题。但这种方法导致了另一个问题。所选图片已复制。这意味着如果我选择3张图片，它将节省6张。 下面的代码是我的javascript

            <input type="file" id="files" name="files" class="btn" style="color:white" multiple />


function previewImages() {
    linebreak = document.createElement("br");
    var preview = document.querySelector('#preview');
    if (this.files) {
        [].forEach.call(this.files, readAndPreview);
    }
    function readAndPreview(file) {
        // Make sure `file.name` matches our extensions criteria
        if (!/\.(jpe?g|png|gif)$/i.test(file.name)) {
            $('#files').val('');
            return alert(file.name + " is not an image");

        } else if (file.size > 4194304) {
            $('#files').val('');

            return alert(file.name + "is larger than 4MB");

        } else {
            var reader = new FileReader();
            reader.addEventListener("load", function () {
                var image = new Image();
                image.height = 100;
                image.title = file.name;
                image.src = this.result;
                preview.append(image.title);
                preview.appendChild(image);
            });
            reader.readAsDataURL(file);
        }
    }
}
//document.querySelector('#files').addEventListener("change", previewImages);
$(document).on('change', 'input[type="file"][multiple]', function () {
    var $this = $(this);
    $this.clone().insertAfter($this);
    $this.hide();

});

$(document).on('change', 'input[type="file"][multiple]', previewImages);

函数previewImages（）{
linebreak=document.createElement（“br”）；
var preview=document.querySelector（“#preview”）；
if（this.files）{
[].forEach.call（this.files，readAndPreview）；
}
函数readAndPreview（文件）{
//确保'file.name'符合我们的扩展标准
if（！/\（jpe？g | png | gif）$/i.test（file.name））{
$（“#文件”）.val（“”）；
返回警报（file.name+“不是图像”）；
}else if（file.size>4194304）{
$（“#文件”）.val（“”）；
返回警报（file.name+“大于4MB”）；
}否则{
var reader=new FileReader（）；
reader.addEventListener（“加载”，函数（）{
var image=新图像（）；
image.height=100；
image.title=file.name；
image.src=this.result；
预览。追加（图像。标题）；
预览。追加子对象（图像）；
});
reader.readAsDataURL（文件）；
}
}
}
//document.querySelector（“#files”）.addEventListener（“更改”，预览图像）；
$（文档）.on（'change'，'input[type=“file”][multiple]”，函数（）{
var$this=$（this）；
$this.clone（）.insertAfter（$this）；
$this.hide（）；
});
$（文档）.on（'change'，'input[type=“file”][multiple]”，previewImages）；

您的表单代码是什么样子的？您可以在我更新后看到我的视图代码。

            <input type="file" id="files" name="files" class="btn" style="color:white" multiple />


function previewImages() {
    linebreak = document.createElement("br");
    var preview = document.querySelector('#preview');
    if (this.files) {
        [].forEach.call(this.files, readAndPreview);
    }
    function readAndPreview(file) {
        // Make sure `file.name` matches our extensions criteria
        if (!/\.(jpe?g|png|gif)$/i.test(file.name)) {
            $('#files').val('');
            return alert(file.name + " is not an image");

        } else if (file.size > 4194304) {
            $('#files').val('');

            return alert(file.name + "is larger than 4MB");

        } else {
            var reader = new FileReader();
            reader.addEventListener("load", function () {
                var image = new Image();
                image.height = 100;
                image.title = file.name;
                image.src = this.result;
                preview.append(image.title);
                preview.appendChild(image);
            });
            reader.readAsDataURL(file);
        }
    }
}
//document.querySelector('#files').addEventListener("change", previewImages);
$(document).on('change', 'input[type="file"][multiple]', function () {
    var $this = $(this);
    $this.clone().insertAfter($this);
    $this.hide();

});

$(document).on('change', 'input[type="file"][multiple]', previewImages);