如何将JSON结果设置为' src' ' img'在ASP.NET MVC4中显示图像?

时间:2015-04-01 13:50:05

标签: javascript jquery ajax json asp.net-mvc-4

在我看来,我有一个AJAX的JSON格式的绝对路径。它看起来像:

var addresIMG=data.result.sourcefile;//address is 'D:/jqueryfileuploadmvc4/MVC4Appl/App_Data/1.png'

但是,视图无法将图像渲染为属性“src”图像应如下所示:

<img src="@Url.Content("~/App_Data /" + "1.png")"  /> 

但我的观点是:  //它不正确,因为图像的地址应该发送到服务器

JS:

<script type="text/javascript">
$(document).ready(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        url: '/Home/UploadFiles',
        autoUpload: true,
        done: function (e, data) {  
             var addresIMG=data.result.sourcefile;//address is 'D:/jqueryfileuploadmvc4/MVC4Appl/App_Data/1.png''
            $(".file_source").attr('src', data.result.sourcefile);//it sets an absolute path and it is incorrect. The image iddress should look like src="@Url.Content("~/App_Data /" + "1.png")" 


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

是否可以通过JSON的结果分配'src'属性?

1 个答案:

答案 0 :(得分:1)

JSON数据应包含相对或绝对URL,而不是文件系统路径。浏览器无法直接访问服务器的文件系统,因此src属性必须使用URL。

服务器必须通过映射文件系统路径来生成正确的URL,如下所示:

var imageUrl = Url.Content("~/App_Data/1.png");

填充模型的服务器端逻辑必须设置sourcefile属性,然后将其序列化并作为JSON发送到客户端。例如

var model = GetModelFromDatabase();  //any code that sets your model object
model.sourcefile = imageUrl;

然后,您就可以毫无问题地使用var addresIMG=data.result.sourcefile;