(前言:这个问题是关于2011年发布的ASP.NET MVC 3.0,而不是关于2019年发布的ASP.NETCore 3.0)

我想用asp.net mvc上传文件。如何使用html输入文件控件上载文件?


当前回答

提供完整的解决方案

首先在MVC视图中使用.CShtml中的输入

<input type="file" id="UploadImg" /></br>
<img id="imgPreview" height="200" width="200" />

现在调用Ajax调用

  $("#UploadImg").change(function () {
    var data = new FormData();
    var files = $("#UploadImg").get(0).files;
    if (files.length > 0) {
        data.append("MyImages", files[0]);
    }

    $.ajax({
        // url: "Controller/ActionMethod"
        url: "/SignUp/UploadFile",
        type: "POST",
        processData: false,
        contentType: false,
        data: data,
        success: function (response)
        {
            //code after success
            $("#UploadPhoto").val(response);
            $("#imgPreview").attr('src', '/Upload/' + response);
        },
        error: function (er) {
            //alert(er);
        }

    });
});

控制器Json呼叫

[HttpGet]
public JsonResult UploadFile()
    {
        string _imgname = string.Empty;
        if (System.Web.HttpContext.Current.Request.Files.AllKeys.Any())
        {
            var pic = System.Web.HttpContext.Current.Request.Files["MyImages"];
            if (pic.ContentLength > 0)
            {
                var fileName = Path.GetFileName(pic.FileName);
                var _ext = Path.GetExtension(pic.FileName);

                _imgname = Guid.NewGuid().ToString();
                var _comPath = Server.MapPath("/MyFolder") + _imgname + _ext;
                _imgname = "img_" + _imgname + _ext;

                ViewBag.Msg = _comPath;
                var path = _comPath;
                tblAssignment assign = new tblAssignment();
                assign.Uploaded_Path = "/MyFolder" + _imgname + _ext;
                // Saving Image in Original Mode
                pic.SaveAs(path);
            }
        }
        return Json(Convert.ToString(_imgname), JsonRequestBehavior.AllowGet);
    }

其他回答

尽管我在donnetfiddle上为你做了一个示例项目,但大多数答案似乎都足够合理

我正在使用LumenWorks.Framework进行CSV工作,但这不是必须的。

Demo

View

            @using (Html.BeginForm("Index", "Home", "POST")) 

            {
                <div class="form-group">

                        <label for="file">Upload Files:</label>
                        <input type="file" multiple name="files" id="files" class="form-control"/><br><br>
                        <input type="submit" value="Upload Files" class="form-control"/>
                </div>

控制器:

    [HttpPost]
    public ActionResult Index(HttpPostedFileBase upload)
    {
        if (ModelState.IsValid)
        {
            if (upload != null && upload.ContentLength > 0)
            {
                // Validation content length 
                if (upload.FileName.EndsWith(".csv") || upload.FileName.EndsWith(".CSV"))
                {
                    //extention validation 
                    ViewBag.Result = "Correct File Uploaded";
                }
            }
        }

        return View();
    }

我给你简单易懂的方法。

首先,必须在.Cshtml文件中编写以下代码。

<input name="Image" type="file" class="form-control" id="resume" />

然后在控制器中输入以下代码:

if (i > 0) {
    HttpPostedFileBase file = Request.Files["Image"];


    if (file != null && file.ContentLength > 0) {
        if (!string.IsNullOrEmpty(file.FileName)) {
            string extension = Path.GetExtension(file.FileName);

            switch ((extension.ToLower())) {
                case ".doc":
                    break;
                case ".docx":
                    break;
                case ".pdf":
                    break;
                default:
                    ViewBag.result = "Please attach file with extension .doc , .docx , .pdf";
                    return View();
            }

            if (!Directory.Exists(Server.MapPath("~") + "\\Resume\\")) {
                System.IO.Directory.CreateDirectory(Server.MapPath("~") + "\\Resume\\");
            }

            string documentpath = Server.MapPath("~") + "\\Resume\\" + i + "_" + file.FileName;
            file.SaveAs(documentpath);
            string filename = i + "_" + file.FileName;
            result = _objbalResume.UpdateResume(filename, i);
            Attachment at = new Attachment(documentpath);

            //ViewBag.result = (ans == true ? "Thanks for contacting us.We will reply as soon as possible" : "There is some problem. Please try again later.");
        }
    } else {
        ...
    }
}

为此,您必须根据您的数据库制作BAL和DAL层。

检查我的解决方案

public string SaveFile(HttpPostedFileBase uploadfile, string saveInDirectory="/", List<string> acceptedExtention =null)
{
    acceptedExtention = acceptedExtention ?? new List<String>() {".png", ".Jpeg"};//optional arguments

    var extension = Path.GetExtension(uploadfile.FileName).ToLower();

    if (!acceptedExtention.Contains(extension))
    {
        throw new UserFriendlyException("Unsupported File type");
    }
    var tempPath = GenerateDocumentPath(uploadfile.FileName, saveInDirectory);
    FileHelper.DeleteIfExists(tempPath);
    uploadfile.SaveAs(tempPath);

    var fileName = Path.GetFileName(tempPath);
    return fileName;
}

private string GenerateDocumentPath(string fileName, string saveInDirectory)
{
    System.IO.Directory.CreateDirectory(Server.MapPath($"~/{saveInDirectory}"));
    return Path.Combine(Server.MapPath($"~/{saveInDirectory}"), Path.GetFileNameWithoutExtension(fileName) +"_"+ DateTime.Now.Ticks + Path.GetExtension(fileName));
}

在基本控制器中添加这些函数,以便可以在所有控制器中使用它们

检查如何使用它

SaveFile(view.PassportPicture,acceptedExtention:new List<String>() { ".png", ".Jpeg"},saveInDirectory: "content/img/PassportPicture");

下面是一个完整的例子

[HttpPost]
public async Task<JsonResult> CreateUserThenGenerateToken(CreateUserViewModel view)
{// CreateUserViewModel contain two properties of type HttpPostedFileBase  
    string passportPicture = null, profilePicture = null;
    if (view.PassportPicture != null)
    {
        passportPicture = SaveFile(view.PassportPicture,acceptedExtention:new List<String>() { ".png", ".Jpeg"},saveInDirectory: "content/img/PassportPicture");
    }
    if (view.ProfilePicture != null)
    {
        profilePicture = SaveFile(yourHttpPostedFileBase, acceptedExtention: new List<String>() { ".png", ".Jpeg" }, saveInDirectory: "content/img/ProfilePicture");
    }
    var input = view.MapTo<CreateUserInput>();
    input.PassportPicture = passportPicture;
    input.ProfilePicture = profilePicture;


    var getUserOutput = await _userAppService.CreateUserThenGenerateToken(input);
    return new AbpJsonResult(getUserOutput);
    //return Json(new AjaxResponse() { Result = getUserOutput, Success = true });

}

我的方法和上面差不多,我将向您展示我的代码以及如何使用MYSSQL数据库。。。

数据库中的文档表-

int Id(PK),字符串Url,字符串描述,创建者,租户ID上传日期

上面的代码ID是主键,URL是文件的名称(末尾有文件类型),要在文档视图中输出的文件描述,CreatedBy是上载文件的人,tenncyId,dateUploaded

在视图中,必须定义enctype,否则它将无法正常工作。

@using (Html.BeginForm("Upload", "Document", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<div class="input-group">
    <label for="file">Upload a document:</label>
    <input type="file" name="file" id="file" />
</div>
}

上面的代码将给你一个浏览按钮,然后在我的项目中,我有一个基本上名为IsValidImage的类,它只是检查文件大小是否在指定的最大大小之下,检查它是否是IMG文件,这都在类bool函数中。所以,如果true返回true。

public static bool IsValidImage(HttpPostedFileBase file, double maxFileSize, ModelState ms )
{
    // make sur the file isnt null.
    if( file == null )
        return false;

// the param I normally set maxFileSize is 10MB  10 * 1024 * 1024 = 10485760 bytes converted is 10mb
var max = maxFileSize * 1024 * 1024;

// check if the filesize is above our defined MAX size.
if( file.ContentLength > max )
    return false;

try
{
    // define our allowed image formats
    var allowedFormats = new[] { ImageFormat.Jpeg, ImageFormat.Png, ImageFormat.Gif, ImageFormat.Bmp };

    // Creates an Image from the specified data stream.      
    using (var img = Image.FromStream(file.InputStream))
    {
        // Return true if the image format is allowed
        return allowedFormats.Contains(img.RawFormat);
    }
}
catch( Exception ex )
{
    ms.AddModelError( "", ex.Message );                 
}
return false;   
}

因此,在控制器中:

if (!Code.Picture.IsValidUpload(model.File, 10, true))
{                
    return View(model);
}

// Set the file name up... Being random guid, and then todays time in ticks. Then add the file extension
// to the end of the file name
var dbPath = Guid.NewGuid().ToString() + DateTime.UtcNow.Ticks + Path.GetExtension(model.File.FileName);

// Combine the two paths together being the location on the server to store it
// then the actual file name and extension.
var path = Path.Combine(Server.MapPath("~/Uploads/Documents/"), dbPath);

// set variable as Parent directory I do this to make sure the path exists if not
// I will create the directory.
var directoryInfo = new FileInfo(path).Directory;

if (directoryInfo != null)
    directoryInfo.Create();

// save the document in the combined path.
model.File.SaveAs(path);

// then add the data to the database
_db.Documents.Add(new Document
{
    TenancyId = model.SelectedTenancy,
    FileUrl = dbPath,
    FileDescription = model.Description,
    CreatedBy = loggedInAs,
    CreatedDate = DateTime.UtcNow,
    UpdatedDate = null,
    CanTenantView = true
});

_db.SaveChanges();
model.Successfull = true;

您不使用文件输入控件。ASP.NET MVC中未使用服务器端控件。查看下面的博客文章,其中说明了如何在ASP.NET MVC中实现这一点。

因此,您将首先创建一个HTML表单,其中包含文件输入:

@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <input type="file" name="file" />
    <input type="submit" value="OK" />
}

然后你会有一个控制器来处理上传:

public class HomeController : Controller
{
    // This action renders the form
    public ActionResult Index()
    {
        return View();
    }

    // This action handles the form POST and the upload
    [HttpPost]
    public ActionResult Index(HttpPostedFileBase file)
    {
        // Verify that the user selected a file
        if (file != null && file.ContentLength > 0) 
        {
            // extract only the filename
            var fileName = Path.GetFileName(file.FileName);
            // store the file inside ~/App_Data/uploads folder
            var path = Path.Combine(Server.MapPath("~/App_Data/uploads"), fileName);
            file.SaveAs(path);
        }
        // redirect back to the index action to show the form once again
        return RedirectToAction("Index");        
    }
}