Jquery 检索包含二进制图像的表单数据，并使用webapi在视图中显示_Jquery_Sql_Angularjs_Asp.net Web Api_Filestream

Jquery 检索包含二进制图像的表单数据，并使用webapi在视图中显示

jquery sql angularjs asp.net-web-api

Jquery 检索包含二进制图像的表单数据，并使用webapi在视图中显示,jquery,sql,angularjs,asp.net-web-api,filestream,Jquery,Sql,Angularjs,Asp.net Web Api,Filestream,我有一个MVC webapi项目，它使用jquery文件上传插件将jpg发送并转换为带有数据字段的二进制图像到我的sql server。那很好用。我需要帮助检索表单数据并将图像转换回jpg以在视图中显示所有表单数据。它最初是一个角度项目，但我发现上传的解决方案是使用jquery。我还没有找到用数据字段转换二值图像的例子。谢谢你的帮助 Api控制器 public apiItemController(ITexasIceAdapter adapter) { _adapter

我有一个MVC webapi项目，它使用jquery文件上传插件将jpg发送并转换为带有数据字段的二进制图像到我的sql server。那很好用。我需要帮助检索表单数据并将图像转换回jpg以在视图中显示所有表单数据。它最初是一个角度项目，但我发现上传的解决方案是使用jquery。我还没有找到用数据字段转换二值图像的例子。谢谢你的帮助

Api控制器

 public apiItemController(ITexasIceAdapter adapter)
    {
        _adapter = adapter;
    }

    //// GET api/<controller>
    public IHttpActionResult Get()
    {

        var item = _adapter.GetItems();
        return Ok(item);
    }

    // GET api/<controller>/5
    public IHttpActionResult Get(int id)
    {
        Item item = new Item();
        item = _adapter.GetItem(id);
        if (item == null)
        {
            return NotFound();
        }
        return Ok(item);
    }



    //POST
     public async Task<object> PostFile()
    {
        if (!Request.Content.IsMimeMultipartContent())
           throw new Exception();


        var provider = new MultipartMemoryStreamProvider();
        var result = new { files = new List<object>() };
        var item = new Item();

        item.ItemName = HttpContext.Current.Request.Form["itemName"];
        item.ItemDescription = HttpContext.Current.Request.Form["itemDescription"];
        item.ItemCategory = HttpContext.Current.Request.Form["itemCategory"];
        item.ItemPrice = HttpContext.Current.Request.Form["itemPrice"];
        await Request.Content.ReadAsMultipartAsync(provider)
         .ContinueWith(async (a) =>
         {
             foreach (var file in provider.Contents)
             {
                 if (file.Headers.ContentLength > 1000)
                 {
                     var filename = file.Headers.ContentDisposition.FileName.Trim('\"');
                     var contentType = file.Headers.ContentType.ToString();
                     await file.ReadAsByteArrayAsync().ContinueWith(b => { item.Image = b.Result; });
                 }


             }


         }).Unwrap();
        new TexasIceDataAdapter().PostNewItem(item);
        return result;

    }

app.controller('MainCtrl', function ($scope, $location, $anchorScroll, $ekathuwa, $q, $http) {
$http({
    method: "GET",
    url: "/api/apiItem/",

}).success(function (data, status) {
    $scope.itemArray = data;
    console.log(data);

});

jqueryui文件上传

 var url = "/api/apiItem/File",
uploadButton = $('<button/>')
.addClass('btn btn-primary')
.prop('disabled', true)
.text('Processing...')
.on('click', function () {
    var $this = $(this),
    data = $this.data();
    $this.off('click').text('Abort').on('click', function () {
        $this.remove();
        data.abort();
    });
    data.submit().always(function () {
        $this.remove();
    });
});

$('#fileupload').fileupload({
    url: url,
    dataType: 'json',
    autoUpload: true,

    maxFileSize: 5000000, // 5 MB
    disableImageResize: /Android(?!.*Chrome)|Opera/
    .test(window.navigator.userAgent),
    previewMaxWidth: 100,
    previewMaxHeight: 100,
    previewCrop: true
     , submit: function (e, data) {
         // The example input, doesn't have to be part of the upload form:
         var itemName = $('#itemName');
         var itemDescription = $('#itemDescription');
         var itemCategory = $('#itemCategory');
         var itemPrice = $('#itemPrice');
         data.formData = {};
         data.formData.itemName = itemName.val();

         data.formData.itemDescription = itemDescription.val();
         data.formData.itemCategory = itemCategory.val();
         data.formData.itemPrice = itemPrice.val();
     }
}).on('fileuploadadd', function (e, data) {

    data.context = $('<div/>').appendTo('#files');
    $.each(data.files, function (index, file) {
        var node = $('<p/>')
        .append($('<span/>').text(file.name));
        if (!index) {
            node
            .append('<br>')
            .append(uploadButton.clone(true).data(data));
        }
        node.appendTo(data.context);
    });
}).on('fileuploadprocessalways', function (e, data) {
    var index = data.index,
    file = data.files[index],
    node = $(data.context.children()[index]);
    if (file.preview) {
        node.prepend('<br>').prepend(file.preview);
    }
    if (file.error) {
        node.append('<br>').append($('<span class="text-danger"/>').text(file.error));
    }
    if (index + 1 === data.files.length) {
        data.context.find('button').text('Upload').prop('disabled', !!data.files.error);
    }
}).on('fileuploadprogressall', function (e, data) {
    var progress = parseInt(data.loaded / data.total * 100, 10);
    $('#progress .progress-bar').css('width', progress + '%');
}).on('fileuploaddone', function (e, data) {
    $.each(data.result.files, function (index, file) {
        if (file.url) {
            var link = $('<a>').attr('target', '_blank').prop('href', file.url);
            $(data.context.children()[index]).wrap(link);
        } else if (file.error) {
            var error = $('<span class="text-danger"/>').text(file.error);
            $(data.context.children()[index]).append('<br>').append(error);
        }
    });
}).on('fileuploadfail', function (e, data) {
    $.each(data.files, function (index, file) {
        var error = $('<span class="text-danger"/>').text('File upload failed.');
        $(data.context.children()[index]).append('<br>').append(error);
    });
}).bind('fileuploadalways', function (e, data) {
    console.log(data);
    if (data._response.textStatus === "success") {
        for (var i = 0; i < data._response.jqXHR.responseJSON.files.length; i++) {

        }
        $('#progress .progress-bar').css('width', '0%');
    }

}).prop('disabled', !$.support.fileInput)
          .parent().addClass($.support.fileInput ? undefined : 'disabled');

var url=“/api/apitem/File”，
uploadButton=$（''）
.addClass（'btn btn primary'）
.prop（'disabled'，true）
.text（'正在处理…'）
.on（'单击'，函数（）{
变量$this=$（this），
data=$this.data（）；
$this.off（'click'）。text（'Abort'）。on（'click'，函数（）{
$this.remove（）；
data.abort（）；
});
data.submit（）始终（函数（）{
$this.remove（）；
});
});
$（'#fileupload'）。fileupload({
url:url，
数据类型：“json”，
自动上传：对，
最大文件大小：5000000，//5 MB
disableImageResize:/Android（？。*Chrome）| Opera/
.test（window.navigator.userAgent），
预览最大宽度：100，
预览最大高度：100，
previewCrop：true
，提交：功能（e，数据）{
//示例输入不必是上载表单的一部分：
var itemName=$（“#itemName”）；
var itemsdescription=$（“#itemsdescription”）；
var itemcegory=$（“#itemcegory”）；
var itemPrice=$（“#itemPrice”）；
data.formData={}；
data.formData.itemName=itemName.val（）；
data.formData.itemsdescription=itemsdescription.val（）；
data.formData.itemcegory=itemcegory.val（）；
data.formData.itemPrice=itemPrice.val（）；
}
}).on（'fileuploadadd'，函数（e，数据）{
data.context=$（''）.appendTo（'#文件'）；
$.each（data.files，函数（索引，文件）{
变量节点=$（“”）
.append（$（''）.text（file.name））；
如果（！索引）{
节点
.append（“
”）
.append（uploadButton.clone（true）.data（data））；
}
appendTo（data.context）；
});
}).on（'fileuploadprocessalways'，函数（e，数据）{
var指数=data.index，
file=data.files[index]，
node=$（data.context.children（）[index]）；
if（file.preview）{
node.prepend（“
”）.prepend（file.preview）；
}
if（file.error）{
node.append（“
”）.append（$（“”）.text（file.error））；
}
if（索引+1==data.files.length）{
data.context.find（'button'）.text（'Upload'）.prop（'disabled'），！！data.files.error）；
}
}).on（'fileuploadprogressall'，函数（e，数据）{
var progress=parseInt（data.loaded/data.total*100,10）；
$（'#progress.progress bar'）.css（'width'，progress+'%'）；
}).on（'fileuploaddone'，函数（e，数据）{
$.each（data.result.files，函数（索引，文件）{
if（file.url）{
变量链接=$（'
{{item.itemcegory}}
{{item.ItemName}
{{item.itemsdescription}}
${{item.ItemPrice}

提交表单视图

<form class="form-horizontal" id="fileupload" enctype="multipart/form-data">
            <fieldset>
                <!-- Text input-->
                <div class="form-group">
                    <label class="col-md-2 control-label">Name :</label>
                    <div class="col-md-8">
                        <input id="itemName" type="text" class="form-control input-md">

                    </div>
                </div>

                <!-- Textarea -->
                <div class="form-group">
                    <label class="col-md-2 control-label">Description :</label>
                    <div class="col-md-8">
                        <input class="form-control" type="text" id="itemDescription">
                    </div>
                </div>
                <!-- Textarea -->
                <div class="form-group">
                    <label class="col-md-2 control-label">Category :</label>
                    <div class="col-md-8">
                        <input class="form-control" type="text" id="itemCategory" />
                    </div>
                </div>
                <!-- Textarea -->
                <div class="form-group">
                    <label class="col-md-2 control-label">Price :</label>
                    <div class="col-md-8">
                        <input class="form-control" type="text" id="itemPrice" />
                    </div>
                </div>
                <!-- Textarea -->
                <div class="form-group">
                    <label class="col-md-2 control-label">File :</label>
                    <div class="col-md-8">
                        <input type="file"  name="Image" />
                    </div>
                </div>


                <!-- Button -->
                <div class="form-group">
                    <label class="col-md-2 control-label" for="send"></label>
                    <div class="col-md-8">
                        <button type="submit" class="btn btn-primary">Send</button>
                    </div>
                </div>

            </fieldset>
        </form>


姓名：
说明：
类别：
价格：
文件：
发送

找到了解决方案

<img class="img-responsive" ng-alt="" src="{{'data:image/jpg;base64,'+item.Image}}"/>

内置了一个angular指令，可以满足您的需要……我找不到任何有关从API检索文件的信息？您是说一旦上传，您如何访问它？我认为问题是您的代码太多，很难为您开发简单的解决方案。我开始做一个，但不清楚您真正需要什么是的，我的get调用正在运行，但是我无法将二进制图像转换回jpeg格式，因为它附带了其他数据字段。我不确定需要多少代码。

<form class="form-horizontal" id="fileupload" enctype="multipart/form-data">
            <fieldset>
                <!-- Text input-->
                <div class="form-group">
                    <label class="col-md-2 control-label">Name :</label>
                    <div class="col-md-8">
                        <input id="itemName" type="text" class="form-control input-md">

                    </div>
                </div>

                <!-- Textarea -->
                <div class="form-group">
                    <label class="col-md-2 control-label">Description :</label>
                    <div class="col-md-8">
                        <input class="form-control" type="text" id="itemDescription">
                    </div>
                </div>
                <!-- Textarea -->
                <div class="form-group">
                    <label class="col-md-2 control-label">Category :</label>
                    <div class="col-md-8">
                        <input class="form-control" type="text" id="itemCategory" />
                    </div>
                </div>
                <!-- Textarea -->
                <div class="form-group">
                    <label class="col-md-2 control-label">Price :</label>
                    <div class="col-md-8">
                        <input class="form-control" type="text" id="itemPrice" />
                    </div>
                </div>
                <!-- Textarea -->
                <div class="form-group">
                    <label class="col-md-2 control-label">File :</label>
                    <div class="col-md-8">
                        <input type="file"  name="Image" />
                    </div>
                </div>


                <!-- Button -->
                <div class="form-group">
                    <label class="col-md-2 control-label" for="send"></label>
                    <div class="col-md-8">
                        <button type="submit" class="btn btn-primary">Send</button>
                    </div>
                </div>

            </fieldset>
        </form>

<img class="img-responsive" ng-alt="" src="{{'data:image/jpg;base64,'+item.Image}}"/>