我希望能够将多个图像以及其他数据从ajax发布上传到模型。
如果不可能的话,它不必包含在模型中
在用户界面中,用户可以动态添加具有输入文件类型的多个div
这是查看代码:
<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");
}