Question

我的目标是让用户能够上传包含某些数据字段的图片。到目前为止，我只能让一个或另一个工作。下面的代码使我能够将图像作为二进制文件上传到我的sql数据库。我需要帮助以相同的形式上传数据字段和图像。提前谢谢

视图

<form ng-submit="submitItem()" enctype='multipart/form-data'>

<input class="form-control" type="text" ng-model="itemName" placeholder="Name" />
<input class="form-control" type="text" ng-model="itemCategory" placeholder="Category" /><br />
<input class="form-control" type="text" ng-model="itemDescription" placeholder="Description..." />
<input id="fileupload" class="form-control" type="file" ng-model="imageUrl" placeholder="Image" />
<input class="form-control" type="number" ng-model="itemPrice" placeholder="Price" /><br />
<input class="btn btn-danger" type="submit" value="Add Item" />

ApiController

 public class apiItemsController : ApiController
{
    ItemInterface _adapter;
    public apiItemsController()
    {
        _adapter = new ItemDataAdapter();
    }

    public apiItemsController(ItemInterface adapter)
    {
        _adapter = adapter;
    }

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

    {
     var items = _adapter.GetItems();
        return Ok(items);
    }

    // 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();
        await Request.Content.ReadAsMultipartAsync(provider)
        .ContinueWith(async (a) =>
        {
            foreach (var file in provider.Contents)
            {
                var filename = file.Headers.ContentDisposition.FileName.Trim('\"');
                var contentType = file.Headers.ContentType.ToString();
                //var requestId = int.Parse(file.Headers.ContentDisposition.Name.Trim('\"'));
                await file.ReadAsByteArrayAsync().ContinueWith(b =>
                {

                    item.Image = b.Result;
                });
            }
        }).Unwrap();
        new ItemDataAdapter().PostNewItem(item);
        return result;

    }

主控制器

app.controller('MainCtrl', function ($scope, $location, $anchorScroll, $modal, $ekathuwa, $q, Item, Message, $http) {
$scope.itemArray = null;
$http.get("api/apiItems").success(function (data) {
    $scope.itemArray = data;
});
var url = "api/apiItems/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,
    //acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
    maxFileSize: 5000000, // 5 MB
    disableImageResize: /Android(?!.*Chrome)|Opera/
    .test(window.navigator.userAgent),
    previewMaxWidth: 100,
    previewMaxHeight: 100,
    previewCrop: true
  }).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++) {
            //var file = data._response.jqXHR.responseJSON.files[i];
            //model().request.requestAttachments.push({ fileName:  

      ko.observable(file.name), id: ko.observable(file.id) });
        }
        $('#progress .progress-bar').css('width', '0%');
    }

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

DataAdapter的

public class ItemDataAdapter : ItemInterface
{

    public List<Item> GetItems()
    {
       ApplicationDbContext db = new ApplicationDbContext();
        List<Item> model = new List<Item>();
        model = db.Items.ToList();
        return model;
    }

    public Item GetItem(int id)
    {
        ApplicationDbContext db = new ApplicationDbContext();
        Item model = new Item();
        model = db.Items.Where(j => j.ItemId == id)

                       .FirstOrDefault();
        return model;
    }
  public List<Item> PostNewItem( Item newItem)
    {
        ApplicationDbContext db = new ApplicationDbContext();
        //Item item = new Item();
        //item.ItemDescription = newItem.ItemDescription;
        //item.ItemId = newItem.ItemId;
        //item.ItemName = newItem.ItemName;
        //item.ItemPrice = newItem.ItemPrice;
        //item.ItemCategory = newItem.ItemCategory;
        //item.Image = newItem.Image;
        db.Items.Add(newItem);
        db.SaveChanges();

        // ????
        return db.Items.ToList();
    }

类

public class Item
{
    public int ItemId { get; set; }
    public string ItemName { get; set; }
    public string ItemDescription { get; set; }
    public int ItemPrice { get; set; }
    public byte[] Image { get; set; }
    public string ItemCategory { get; set; }
    public bool Hidden { get; set; }
}

Answer 1

在您的javascript文件上传插件中，选项设置了其他表单数据。这里记录的似乎有几种方法可以解决这个问题。 https://github.com/blueimp/jQuery-File-Upload/wiki/How-to-submit-additional-form-data

$('#fileupload').fileupload({
    formData: {example: 'test'},
    url: url,
    dataType: 'json',
    autoUpload: true,
    //acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
    maxFileSize: 5000000, // 5 MB
    disableImageResize: /Android(?!.*Chrome)|Opera/
    .test(window.navigator.userAgent),
    previewMaxWidth: 100,
    previewMaxHeight: 100,
    previewCrop: true
  })

将带有二进制映像的表单数据上载到sql server

1 个答案: