Javascript 在mvc中保存图像的Ajax调用

我在上传图片时遇到问题，我想在MVC中分别上传四张图片，如下图所示。请单击上传图片文件链接以显示图片，如果我们选择了一个特定图片想要保存的文件，并且它想要以正确的文件名作为标题显示预览。请帮帮我。。提前谢谢

---

问题不清楚，但这是使用Ajax在MVC中上传的一个很好的解决方案：

文件上传HTML

解释

id=image的文件上载html用于在按下txtUploadFile输入后从目录中选择图像时，局部视图、js文件或内联脚本（取决于所采取的方法）将启动onchange函数：$'txtUploadFile'。在'change'上，函数e这将对控制器中的方法进行ajax调用-您可以执行所有逻辑，如保存到数据库等。。。从这里开始

然后，控制器函数将文件名返回到ajax调用的success函数，假设您已将图像保存在某个位置，然后可以使用result.fileName或其他方法获取图像：

 $('#image').attr('src', '@Url.Content("~/Content/img/")' + result.fileName);

如您所见，文件上载HTML中的嵌套图像属性正在更改为新上载的图像

---

希望这有帮助。

不清楚你在问什么。标题说的是AJAX，但你的问题并没有说你想如何使用AJAX。你试着做什么？

<script>

var model = @Html.Raw(Json.Encode(Model));

$('#txtUploadFile').on('change', function (e) {
    var files = e.target.files;
    if (files.length > 0) {
        if (window.FormData !== undefined) {
            var data = new FormData();
            for (var x = 0; x < files.length; x++) {
                data.append("file" + x, files[x]);
            }

            $.ajax({
                type: "POST",
                url: '/User/UploadFile/' + model,
                contentType: false,
                processData: false,
                data: data,
                success: function (result) {
                    $('#image').attr('src', '@Url.Content("~/Content/img/")' + result.fileName);
                },
                error: function (xhr, status, p3, p4) {
                    var err = "Error " + " " + status + " " + p3 + " " + p4;
                    if (xhr.responseText && xhr.responseText[0] == "{")
                        err = JSON.parse(xhr.responseText).Message;
                    console.log(err);
                }
            });
        } else {
            alert("This browser doesn't support HTML5 file uploads!");
        }
    }
});

[HttpPost]
    public JsonResult UploadFile(string id)
    {
        var path = "";
        var fileExtension = "";
        var fileName = "";

        if (Request.Files.Count > 0)
        {
            HttpPostedFileBase file = Request.Files[0];

            if (file != null && file.ContentLength > 0)
            {
                fileName = Path.GetFileName(file.FileName);
                fileExtension = Path.GetExtension(file.FileName);

                if (id != "null") 
                {
                   //do bits, save to DB etc./..

                    file.SaveAs(path);
                }
            }
        }
        return Json(new { fileName = fileName });
    }

 $('#image').attr('src', '@Url.Content("~/Content/img/")' + result.fileName);