博客

ASP.NET MVC使用JSAjaxFileUploader插件实现单文件上传

  • Post category:C#

当需要在ASP.NET MVC应用程序中实现单文件上传时，可以使用JSAjaxFileUploader插件来简化开发过程。下面是实现单文件上传的完整攻略：

  1. 在View中添加一个用于上传文件的表单。在文件夹中，打开要添加上传文件的视图，然后添加以下代码：
@using (Html.BeginForm("Upload", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <div class="form-group">
        <label class="control-label">选择文件：</label>
        <input type="file" name="file" id="file" />
    </div>
    <button type="submit" class="btn btn-primary">上传</button>
}

在上面的代码中，我们使用了Html.BeginForm方法来创建一个表单，表单的提交目标指定为Home控制器的Upload方法。我们还添加了一个文件上传控件，将其名称指定为“file”。

  1. 在View中添加JSAjaxFileUploader插件的引用。在Views文件夹中，打开要添加引用的视图，然后添加以下代码：
<script src="~/Scripts/jquery.js"></script>
<script src="~/Scripts/jsajaxfileuploader.js"></script>

在上面的代码中，我们添加了jQuery和JSAjaxFileUploader插件的引用。

  1. 在JavaScript文件中使用JSAjaxFileUploader插件来上传文件。在Scripts文件夹中，打开要添加JavaScript代码的文件，然后添加以下代码：
$(document).ready(function() {
    $('#file').jsAjaxFileUploader({
        url: '/Home/Upload',
        onComplete: function(response) {
            alert('文件上传成功！');
        },
        onError: function(error) {
            alert('文件上传失败：' + error);
        }
    });
});

在上面的代码中，我们使用了JSAjaxFileUploader插件来上传文件。我们将上传文件的URL指定为Home控制器的Upload方法。我们还添加了两个回调函数，一个用于处理上传成功的情况，另一个用于处理上传失败的情况。

  1. 在Controller中添加一个Action来处理文件上传。在Controllers文件夹中，创建一个名为HomeController的类，然后添加以下代码：
[HttpPost]
public ActionResult Upload(HttpPostedFileBase file)
{
    if (file != null && file.ContentLength > 0)
    {
        // 获取文件名和扩展名
        string fileName = Path.GetFileNameWithoutExtension(file.FileName);
        string fileExtension = Path.GetExtension(file.FileName);
        // 生成新的文件名
        string newFileName = fileName + "_" + DateTime.Now.ToString("yyyyMMddHHmmssfff") + fileExtension;
        // 保存文件到服务器
        string filePath = Path.Combine(Server.MapPath("~/Uploads"), newFileName);
        file.SaveAs(filePath);
        // 返回上传结果
        return Json(new { success = true, message = "文件上传成功！", fileName = newFileName });
    }
    else
    {
        return Json(new { success = false, message = "请选择要上传的文件！" });
    }
}

在上面的代码中，我们首先判断上传的文件是否为空，如果不为空，就获取文件名和扩展名，然后生成新的文件名。接下来，我们将文件保存到服务器上，并返回上传结果。如果上传的文件为空，就返回错误信息“请选择要上传的文件！”。

以下是两个示例：

  1. 如果上传的文件大小超过了限制，就显示错误信息。
[HttpPost]
public ActionResult Upload(HttpPostedFileBase file)
{
    if (file != null && file.ContentLength > 0)
    {
        // 判断文件大小是否超过限制
        if (file.ContentLength > 1024 * 1024)
        {
            return Json(new { success = false, message = "上传的文件大小不能超过1MB！" });
        }
        // 获取文件名和扩展名
        string fileName = Path.GetFileNameWithoutExtension(file.FileName);
        string fileExtension = Path.GetExtension(file.FileName);
        // 生成新的文件名
        string newFileName = fileName + "_" + DateTime.Now.ToString("yyyyMMddHHmmssfff") + fileExtension;
        // 保存文件到服务器
        string filePath = Path.Combine(Server.MapPath("~/Uploads"), newFileName);
        file.SaveAs(filePath);
        // 返回上传结果
        return Json(new { success = true, message = "文件上传成功！", fileName = newFileName });
    }
    else
    {
        return Json(new { success = false, message = "请选择要上传的文件！" });
    }
}

在上面的代码中，我们添加了一个判断文件大小的逻辑。如果文件大小超过了1MB，就返回错误信息“上传的文件大小不能超过1MB！”。

  1. 如果上传的文件类型不是图片，就显示错误信息。
[HttpPost]
public ActionResult Upload(HttpPostedFileBase file)
{
    if (file != null && file.ContentLength > 0)
    {
        // 判断文件类型是否为图片
        if (file.ContentType != "image/jpeg" && file.ContentType != "image/png")
        {
            return Json(new { success = false, message = "上传的文件必须是JPEG或PNG格式的图片！" });
        }
        // 获取文件名和扩展名
        string fileName = Path.GetFileNameWithoutExtension(file.FileName);
        string fileExtension = Path.GetExtension(file.FileName);
        // 生成新的文件名
        string newFileName = fileName + "_" + DateTime.Now.ToString("yyyyMMddHHmmssfff") + fileExtension;
        // 保存文件到服务器
        string filePath = Path.Combine(Server.MapPath("~/Uploads"), newFileName);
        file.SaveAs(filePath);
        // 返回上传结果
        return Json(new { success = true, message = "文件上传成功！", fileName = newFileName });
    }
    else
    {
        return Json(new { success = false, message = "请选择要上传的文件！" });
    }
}

在上面的代码中，我们添加了一个判断文件类型的逻辑。如果文件不是JPEG或PNG格式的图片，就返回错误信息“上传的文件必须是JPEG或PNG格式的图片！”。

Tags: