Jquery 如何在我的视图中显示上传的图像

我是MVC的初学者，我开发了J查询

上传的文件

脚本，它真的很有效，我想在我的查看页面中显示我上传的

图像

， 上载图像文件保存-上载的文件夹。我想在我的视图中显示上传的图像，我怎么做，提前谢谢

控制器

public FilePathResult Image()
        {
            string filename = Request.Url.AbsolutePath.Replace("/home/image", "");
            string contentType = "";
            var filePath = new FileInfo(Server.MapPath("~/Uploaded") + filename);

            var index = filename.LastIndexOf(".") + 1;
            var extension = filename.Substring(index).ToUpperInvariant();

            // Fix for IE not handling jpg image types
            contentType = string.Compare(extension, "JPG") == 0 ? "image/jpeg" : string.Format("image/{0}", extension);

            return File(filePath.FullName, contentType);
        }

        [HttpPost]
        public ContentResult UploadFiles()
        {
            var r = new List<UploadFilesResult>();

            foreach (string file in Request.Files)
            {
                HttpPostedFileBase hpf = Request.Files[file] as HttpPostedFileBase;
                if (hpf.ContentLength == 0)
                    continue;

                string savedFileName = Path.Combine(Server.MapPath("~/Uploaded"), Path.GetFileName(hpf.FileName));
                hpf.SaveAs(savedFileName);

                r.Add(new UploadFilesResult()
                {
                    Name = hpf.FileName,
                    Length = hpf.ContentLength,
                    Type = hpf.ContentType
                });
            }
            return Content("{\"name\":\"" + r[0].Name + "\",\"type\":\"" + r[0].Type + "\",\"size\":\"" + string.Format("{0} bytes", r[0].Length) + "\"}", "application/json");
        }

    }

公共文件路径结果图像（） { 字符串文件名=Request.Url.AbsolutePath.Replace（“/home/image”，”）； 字符串contentType=“”； var filePath=newfileinfo（Server.MapPath（“~/upload”）+文件名）； var index=filename.LastIndexOf（“.”）+1； var extension=filename.Substring（index.ToUpperInvariant（）； //修复IE不处理jpg图像类型 contentType=string.Compare（扩展名，“JPG”）==0？“image/jpeg”：string.Format（“image/{0}”，扩展名）； 返回文件（filePath.FullName，contentType）； } [HttpPost] public ContentResult UploadFiles（） { var r=新列表（）； foreach（Request.Files中的字符串文件） { HttpPostedFileBase hpf=Request.Files[file]作为HttpPostedFileBase； 如果（hpf.ContentLength==0） 继续； 字符串savedFileName=Path.Combine（Server.MapPath（“~/upload”）、Path.GetFileName（hpf.FileName））； hpf.SaveAs（savedFileName）； r、 添加（新上载文件结果（） { Name=hpf.FileName， 长度=hpf.ContentLength， Type=hpf.ContentType }); } 返回内容（“{\”名称\“：\”+r[0]。名称+“\”，\”类型\“：\”+r[0]。类型+“\”，\”大小\“：\”+字符串。格式（“{0}字节”，r[0]。长度）+“\”，“应用程序/json”）； } } 脚本

<script type="text/javascript">
    $(document).ready(function () {
        $('#fileupload').fileupload({
            dataType: 'json',
            url: '/Home/UploadFiles',
            autoUpload: true,
            done: function (e, data) {
                $('.file_name').html(data.result.name);
                $('.file_type').html(data.result.type);
                $('.file_size').html(data.result.size);

            }
        }).on('fileuploadprogressall', function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('.progress .progress-bar').css('width', progress + '%');
        });
    });
</script>

$（文档）.ready（函数（）{
$（'#fileupload'）。fileupload({
数据类型：“json”，
url:“/Home/UploadFiles”，
自动上传：对，
完成：功能（e，数据）{
$（'.file_name'）.html（data.result.name）；
$（'.file_type'）.html（data.result.type）；
$（'.file_size'）.html（data.result.size）；
}
}).on（'fileuploadprogressall'，函数（e，数据）{
var progress=parseInt（data.loaded/data.total*100,10）；
$（'.progress.progress bar'）.css（'width'，progress+'%'）；
});
});

查看

<div class="container">
        <span class="btn btn-success fileinput-button">
            <i class="glyphicon glyphicon-plus"></i>
            <span>Add files...</span>
            <input id="fileupload" type="file" name="files[]" multiple>
        </span>
        <br />
        <div class="progress" style="width:500px;">


            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%">
                100% Complete (success)
            </div>
        </div>
        <br />
        <div class="file_name"></div>
        <br />
        <div class="file_type"></div>
        <br />
        <div class="file_size"></div>

    </div>

添加文件。。。


100%完成（成功）

我终于找到了解决方案

 <img id="output" width="200px;" height="200px;" />
        <script>
            var loadFile = function (event) {
                var output = document.getElementById('output');
                output.src = URL.createObjectURL(event.target.files[0]);
            };
        </script>

---

我终于找到了解决方案

 <img id="output" width="200px;" height="200px;" />
        <script>
            var loadFile = function (event) {
                var output = document.getElementById('output');
                output.src = URL.createObjectURL(event.target.files[0]);
            };
        </script>

请参阅如何显示字节数组中的图像（您可以通过从

上传的

文件夹中读取文件获得）。感谢帮助，inow iam修复请参阅如何显示字节数组中的图像（您可以通过从

上传的

文件夹中读取文件获得）。感谢帮助，inow iam修复了它