文件上传的几个示例分享【推荐】

2020-05-27 18:03:15易采站长站整理


<fieldset>
<legend>示例C - ajax+FormData上传文件,Request.Files获取上传文件</legend>
@using (Html.BeginForm("C", "Error", FormMethod.Post, new { enctype = "multipart/form-data", @id = "form_c" }))
{
<span>账号:</span><input type="text" name="userName" value="神牛步行3" /><br />
<span>密码:</span><input type="password" name="userPwd" value="神牛" /><br />
<span>文件:</span><input type="file" name="filesc" multiple /><br />
<button type="button">提交</button><br />
<span id="msg_c"></span>
}
</fieldset>


<script>
$(function () {
//示例C代码
$("#form_c button[type='button']").click(function () {
var msg = $("#msg_c");
var btnSave = $(this);
var formData = new FormData(document.getElementById("form_c"));
console.log(formData);
$.ajax({
url: '/Error/C',
type: 'post',
beforeSend: function (e) {
btnSave.attr("disabled", "disabled");
msg.html("上传中...");
},
success: function (data) {
console.log(data);
var alertMsg = "上传失败";
if (data) {
alertMsg = data.Status == 1 ? data.Data : alertMsg;
}
msg.html(alertMsg);
btnSave.removeAttr("disabled");
},
error: function (data) {
msg.html("上传失败");
btnSave.removeAttr("disabled");
},
data: formData,
cache: false,
contentType: false,
processData: false
});
});
})
</script>

上面的html代码与示例B的格式差不多,只是增加了两个input元素方便我们来测试;重点在js代码中,由上面介绍可以看到FormData的构造只能是HTMLFormElement,所以我们通过document.getElementById(“form_c”)来获取这个表单的对象传递给它;

然后,我们用普通的$.ajax提交FormData对象到后台进行上传,至于后台我们参照示例A的方式来获取文件信息,不用做什么特殊额处理,只是我们返回的信息是Json数据,代码如:


[HttpPost] public JsonResult C()
{
Thread.Sleep(1000 * 5);
var response = new MoResponse();
var sbLog = new StringBuilder("开始处理...");
try
{
sbLog.AppendFormat("账号:{0}<br/>", Request.Params["userName"]);
sbLog.AppendFormat("密码:{0}<br/>", Request.Params["userPwd"]);
var fileCount = Request.Files.Count;
//访问上传文件地址
var path = @"http://localhost:1010/{0}";
//保存文件地址
var uploadPath = @"D:DTTest";
sbLog.AppendFormat("上传文件目录:{0}<br/>", uploadPath);
sbLog.AppendFormat("上传文件量:{0}<br/>", fileCount);