AJAX调用保存在MVC图像 [英] Ajax Call to save images in mvc

问题描述

我有问题，上传图片，我要上传单独四象MVC中，如下面的图（请点击上传图片文件链接来显示图像），如果我们选择一个文件的特定图像希望保存和它要显示preVIEW适当文件名作为标题。请帮我..谢谢提前

I Having issue in uploading images, I want to upload four images individually in MVC as shown in below figure(Please click on "Upload Image File" link to show the image), If we choose one file the particular picture wants to save and it wants to show the preview with proper file name as heading. please help me.. thanks in Advance

上传图片文件

推荐答案

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

Question is not clear but this is a good solution for uploading in MVC using Ajax:

文件上传HTML

<div style="display:none;">
   <img id="image" alt="" src="" class="img-responsive">
</div>

<div id="fileUpload">
<span>Choose Image</span>
<input id="txtUploadFile" type="file" name="files" class="upload" />
</div>

@Html.Partial("~/Views/Shared/_UploadPartial.cshtml")

创建局部视图或添加到HTML

**如果你创建一个局部视图低于code可以在任何地方使用它的网站上，或者创建一个.js文件或者是方式将工作做好。

**if you create a partial view for below code can use it anywhere on site, or create a .js file either is way will work well.

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

说明

文件上传HTML与 ID =形象是当你以后pressing的txtUploadFile输入，那么局部视图或从目录中选择一个图像js文件或内嵌脚本，取决于采取将触发的onchange功能的方法： $（'＃txtUploadFile'）上（'变化'，函数（E）这会做一个Ajax调用你的方法在你的控制器 - 你可以做你的逻辑就像从这里保存到数据库等...

The file upload html with id="image" is for when you select a image from your directory after pressing the txtUploadFile input, then the partial view or js file or inline script, depending on approach taken will fire the onchange function: $('#txtUploadFile').on('change', function (e) this will do a ajax call to your method in your controller - you can do all your logic like saving to the database ect... from here.

控制器函数然后返回文件名以Ajax调用成功功能，假设你已经保存的图像地方，那么你可以使用result.fileName，或任何让你的形象：

The controller function is then returning the fileName to the success function of the ajax call, assuming you have saved the image somewhere you can then use result.fileName, or whatever to get your image:

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

正如你可以看到在文件上传HTML嵌套图像属性被更改到新上传的图片。

As you can see the nested image attribute in the file upload HTML is being changed to the newly uploaded image.

希望这有助于。

这篇关于AJAX调用保存在MVC图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！