上传文件(单文件)(FormData)(前端代码+.NET服务器端)

时间:2022-09-06 18:18:40

由于样式需要不能直接用file,只能用文本框+按钮

<form class="form-horizontal form-bordered form-row-strippe"  enctype="multipart/form-data" method="post" name="fileinfo" id="fileinfo" data-toggle="validator">
<div class="modal-body">
<div class="form-horizontal">
<div class="control-group">
<label class="control-label" style="width: 125px;">
审批项目名称:</label>
<div class="controls" style="margin-left: 0px;">
<input type="text" id="id" name="id" style="display:none;" value="$id$" />
<input type="text" id="projectname" name="projectname" class="m-wrap large" value="$projectname$" />
</div>
</div>
<div class="control-group">
<label class="control-label" style="width: 125px;">
审批项目说明:</label>
<div class="controls" style="margin-left: 0px;">
<input class="m-wrap large" type="text" id="projectinfo" name="projectinfo" value="$projectinfo$" />
</div>
</div>
<div class="control-group">
<label class="control-label" style="width: 125px;">
审批项目文件:</label>
<div class="controls" style="margin-left: 0px;">
<input type="file" id="filepath" name="filepath" style="display:none" onchange="changetext()" />
<input class="m-wrap" type="text" id="pathfile" name="pathfile" readonly="readonly" value="$filepath$" />
<input class="btn green" type="button" value="选择文件" id="uploadpath" />
</div>
</div>
</div>
</div>
<div class="modal-footer bg-info">
<input class="btn blue" type="button" id="btnsubmit" value="提交" onclick="update()" data-dismiss="modal" />
<button type="button" class="btn green" data-dismiss="modal">
取消</button>
</div>
</form>

(HTML)

 <script type="text/javascript">
jQuery(document).ready(function () {
$('#uploadpath').click('click', function () {
$('#filepath').trigger('click');
});
})
function changetext()
{
if ($("#filepath").val() == "") {
//当用户没有选择文件时,不修改原有路径
}
else {
$("#pathfile").val($("#filepath").val());
}
}
function update() {
var projectname = $("#projectname").val();
var projectinfo = $("#projectinfo").val();
var filepath = $("#pathfile").val();
//var formData = new FormData($("#fileinfo")[0]);//两者皆可
var formData = new FormData(document.forms.namedItem("fileinfo"));
formData.append("id", $id$);
$.ajax({
url: "/ApprovalProcessNoView/queryeditproject",
type: "POST",
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function (data) {
alert(data.msg);
},
error: function (data) {
alert(data.msg);
}
});
}
</script>

(JAVASCRIPT)

 returnresult rr = new returnresult();
string projectname = Request.Form["projectname"];
string projectinfo = Request.Form["projectinfo"];
HttpPostedFileBase pathfile = Request.Files["filepath"];
long id = Request.Form["id"].ToLong(); string path = "/UF/Uploads/myfile";
//获取上传目录 转换为物理路径
string uploadPath = Server.MapPath(path);
//判断目录是否存在
if (!Directory.Exists(uploadPath))
{
Directory.CreateDirectory(uploadPath);
}
//保存文件的物理路径
string saveFile = uploadPath + pathfile.FileName;
//保存图片到服务器
try
{
pathfile.SaveAs(saveFile);
rr.status = true;
}
catch (Exception)
{
rr.status = false;
rr.msg = "文件上传失败";
}

(后台代码【C#】)

主要使用:FormData

效果:将文件和其他需要上传的数据一起上传

相关文章