上传图片 ASP.NET MVC答案

【问题标题】：Upload Image ASP.NET MVC上传图片 ASP.NET MVC
【发布时间】：2018-05-02 21:43:45
【问题描述】：

嘿，我想上传图片并将该图片保存到一个文件夹中，并将该图片的名称保存到数据库，此外我还为其他表单字段使用模型绑定。这是此 HttpPostedFileBase 文件中的代码接收 null 我也在我的表单中使用 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);
                }}

此外，我也在尝试这个，但我无法理解如何将图像保存在文件夹中，我的意思是 SaveAs -> 文件之前的对象实例

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>
                }

请帮助我，谢谢。

【问题讨论】：

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

标签： c# asp.net-mvc razor file-upload

【解决方案1】：

您的输入元素name 属性值应与您的参数名称匹配

由于您的 HttpPostedFileBase 参数名称是 file，因此为您的文件输入提供相同的名称。

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

现在提交表单后，模型绑定器将能够将您提交的表单数据映射到名为file的参数

我还建议您使用Path.Combine 而不是字符串连接。

string physicalPath = Path.Combine(Server.MapPath("~/Images/Uploads"), fileName);

【讨论】：

【解决方案2】：

我曾参考此link 来解决覆盖先前选择的文件的问题。但是这种方法导致了另一个问题。选择的图片被复制了。这意味着如果我选择 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);

【讨论】：