如何将多个图像以及其他数据从ajax发布上传到Model?

时间:2019-07-08 19:18:32

标签: ajax asp.net-mvc post image-uploading

我希望能够将多个图像以及其他数据从ajax发布上传到模型。

如果不可能的话,它不必包含在模型中

在用户界面中,用户可以动态添加具有输入文件类型的多个div

View

这是查看代码:

<div class="modal-body">
            <div class="container-fluid">
                <div class="row form-group">
                    <div class="col-sm-3"><label class="control-label" for="cryptocurrency">Cryptocurrency:</label></div>
                    <div class="col-sm-9"><select class="cryptocurrencyDropdown" style="width:50%"></select></div>
                </div>
                <div class="row form-group">
                    <div class="col-sm-3"><label class="control-label" for="buyPrice">Buy Price:</label></div>
                    <div class="col-sm-9"><input type="number" id="buyPrice" name="buyPrice" class="form-control" /></div>
                </div>
                <div class="row form-group">
                    <div class="col-sm-3"><label class="control-label" for="amount">Amount:</label></div>
                    <div class="col-sm-9"><input type="number" id="amount" name="amount" class="form-control" /></div>
                </div>
                <div class="row form-group">
                    <div class="col-sm-3"><label class="control-label" for="playType">Playtype:</label></div>
                    <div class="col-sm-9"><select id="playTypeDropdown"></select></div>
                </div>

                <div class="row form-group">
                    <div class="col-sm-3"><label class="control-label" for="exchangeURL">Exchange URL:</label></div>
                    <div class="col-sm-9"><input id="exchangeURL" name="exchangeURL" class="form-control" /></div>
                </div>
                <hr />

                <h1>Note<a href="#" data-toggle="urlTooltip" title="Exchanges, Roadmap, BlockExplorer(Token Metric), Telegram, Twitter, Official Site"><i class="fa fa-question-circle" aria-hidden="true"></i></a></h1>
                <div class="tradenotesDiv">
                    <div class="tradenoteDiv row form-group">
                        <div class="col-sm-6">
                                <input type="text" name="tradenotes" class="tradenotes form-control" placeholder="Note" />
                        </div>
                        <div class="col-sm-4">
                            <form><input type="file" class="tradenoteimages" /></form>
                        </div>
                        <div class="col-sm-1">
                            <button class="addTradeNoteDiv btn btn-default">+</button>
                        </div>
                        <div class="col-sm-1">
                            <button class="deleteTradeNoteDiv btn btn-default">-</button>
                        </div>
                    </div>
                </div>
                <hr />
                <h1>Reason<a href="#" data-toggle="eventTooltip" title="Token Releases, Exchange Listing, Convertion, Mainnet, Product Release, Roadmap events"><i class="fa fa-question-circle" aria-hidden="true"></i></a></h1>
                <div class="tradereasonsDiv">
                    <div class="tradereasonDiv row form-group">
                        <div class="col-sm-10">
                            <input type="text" name="reasons" class="reasons form-control" />
                        </div>
                        <div class="col-sm-1">
                            <button class="addTradeReasonDiv btn btn-default">+</button>
                        </div>
                        <div class="col-sm-1">
                            <button class="deleteTradeReasonDiv btn btn-default">-</button>
                        </div>
                    </div>
                </div>
            </div>

这是我在ajax发布中的尝试

    $(document).on("click", "#addTrade", function () {
        var tradeNotes = [];
        $.each($('.tradenotesDiv .tradenoteDiv'), function (index, element) {
            var tradeNote = new Object();
            var input = $(element).find('input');
            tradeNote.Description = $(input[0]).val();
            var formData = new FormData(form);
            tradeNote.Image =formData.append('image', $(this).find('input[type=file]')[0].files[0]);
            tradeNotes.push(tradeNote);
        });

        var tradeReasons = [];
        $.each($('.tradereasonsDiv .tradereasonDiv'), function (index, element) {
            var tradeReason = new Object();
            var input = $(element).find('input');
            tradeReason.Reason = $(input[0]).val();
            tradeReasons.push(tradeReason);
        });

        var trade = new Object();
        trade.CryptocurrencyId = $('#addTradeModal').find('#cryptocurrency').val();
        trade.BuyPrice = $('#addTradeModal').find('#buyPrice').val();
        trade.Amount = $('#addTradeModal').find('#amount').val();
        trade.PlayTypeId = $('#addTradeModal').find('#playTypeDropdown').val();
        trade.ExchangeURL = $('#addTradeModal').find('#exchangeURL').val();
        trade.TradeNotes = tradeNotes;
        trade.TradeReasons = tradeReasons;

        $.ajax({
            url: '@Url.Action("AddTrade", "Home")',
            type: 'POST',
            data: JSON.stringify(trade),
            contentType: false,
            processData: false,
            success: function (data) {
                alert(data.success);
            },
            error: function (e) {
                alert(e.responseText);
            }
        });
    });

这是我的模特

public class Trade
{
    public int CryptocurrencyId { get; set; }
    public Decimal BuyPrice { get; set; }
    public int BuyCryptocurrencyPairId { get; set; }
    public Decimal Amount { get; set; }
    //public Decimal SellPrice { get; set; }
    //public int SellCryptocurrencyPairId { get; set; }
    public Decimal PnL { get; set; }
    public int PlayTypeId { get; set; }
    public bool Position { get; set; }
    public string ExchangeUrl { get; set; }
    public IEnumerable<TradeNote> TradeNotes { get; set; }
    public IEnumerable<TradeReason> TradeReasons { get; set; }
}

public class TradeNote
{
    public string Note { get; set; }
    public string ImageTitle { get; set; }
    public string ImagePath { get; set; }
    public HttpPostedFileBase Image { get; set; }
}

public class TradeReason
{
    public string Reason { get; set; }
    public bool Entry { get; set; }
}

最后我的控制器

public JsonResult AddTrade(Trade trade)
    {
        return Json("test");
    }

0 个答案:

没有答案