我有一个非常独特的问题,我有一个引用模型列表的模型,并且我需要将一个整数列表传递给控制器,因此为了解决这个问题,我使用了带有传统参数的ajax调用:true参数和输入get,这样我就可以获得ID列表并将其发送到控制器。但是现在我遇到了另一个问题,因为我需要上传2个文件,一个视频和一个缩略图。我尝试了多种方法来实现此目的,但没有任何结果对我来说,httppostedfileBase始终为null。
我尝试通过input type =“ file”标签旁边的“上传按钮”调用另一个ajax,但是没有结果。
这是HTML代码
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-title">
<h4>Add new project</h4>
</div>
<div class="card-body">
<div class="basic-form">
<form id="addNewProject">
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<input type="text" class="form-control input-flat" placeholder="Project name" name="projectname" id="projectname" />
</div>
<div class="form-group">
<textarea class="form-control input-flat",placeholder="Project description..." id="projectDesc"></textarea>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
@Html.DropDownListFor(m => m.clients_client_id,new SelectList(clients,"client_id","client_name"),new { @class = "form-control input-flat",@placeholder = "Project name",@id="clientID" })
</div>
<div class="form-group">
@Html.DropDownListFor(m => m.project_type,new SelectList(types),@id="type"})
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div id="uploadThumb">
<p>Upload Thumbnail for the project</p>
@Html.TextBoxFor(m => m.thumb_url,new { @type = "file",@id = "thumb" })
<input type="button" id="thumUploadBtn" value="Upload" class="btn btn-primary btn-rounded m-b-10 m-l-5">
</div>
<br />
<div>
<p>Upload video for the project</p>
@Html.TextBoxFor(m => m.video_url,@id = "video" })
</div>
</div>
<div class="col-lg-6">
<p>Add skills for this project</p>
<div class="container" style="width:100%;">
<div class="list-group" id="skillList" style="overflow-y: scroll;height:250px">
@for (int i = 0; i < skills.Count; ++i)
{
@*@Html.TextBoxFor(m=> m.Project_Has_Skills,new {@type="checkbox",@value=""+skills.ElementAt(i).skill_name })*@
<input type="checkbox" name="@skills.ElementAt(i).id_skill" value="@skills.ElementAt(i).skill_name" id="@skills.ElementAt(i).id_skill" class="chck" />
<label class="list-group-item" for="@skills.ElementAt(i).id_skill">@skills.ElementAt(i).skill_name</label>
}
</div>
</div>
</div>
</div>
<input type="submit" value="Add project" id="btnAdd" class="btn btn-success btn-flat m-b-10 m-l-5" />
</form>
</div>
</div>
</div>
</div>
</div>
<div class="row">
这是具有ajax调用的脚本
<script>
$(document).ready(function () {
var srs;
var url = "/Administration/AddProject"
$('input[type="checkbox"]').bind('change',function () {
srs = []
$('input[type="checkbox"]').each(function (index,value) {
if (this.checked) {
/*add*/ /*get label text associated with checkbox*/
srs.push($(this).attr("id"));
}
});
});
$("#addNewProject").on("submit",function (e) {
e.preventDefault();
var name = $("#projectname").val();
var desc = $("#projectDesc").val();
var type = $("#type option:selected").text();
var client = $("#clientID").val();
var thumbURL = $("#thumb").val().split('\\').pop();
var videoURL = $("#video").val().split('\\').pop();
var fData = new FormData();
fData.append("thumbfile",$("#thumb")[0].files[0]);
alert(fData.text);
$.ajax({
type: 'GET',dataType: 'json',url: '@Url.action("AddProject","Administration")',data: {
skillIDS: srs,projectname: name,description: desc,clientID: client,projectType: type,thumbUrl: thumbURL,videoUrl: videoURL,thumbfile: fData
},traditional: true,success: function (data) {
},error: function (data) {
}
});
});
</script>
和控制器
public JsonResult AddProject(List<int> skillIDS,string projectname,string description,int clientID,string projectType,string thumbUrl,string videoUrl,httppostedfileBase thumbfile,httppostedfileBase videoFile)
{
thumbfile = Request.Files[0];
Project project = new Project();
project.project_name = projectname;
project.project_description = description;
project.clients_client_id = clientID;
project.project_type = projectType;
project.thumb_url = thumbUrl;
project.video_url = videoUrl;
return null;
}