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

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

@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>
<fieldset>
<legend>示例D - 自定义上传插件,Request.Files获取上传文件并提交表单内容</legend>
@using (Html.BeginForm("D", "Error", FormMethod.Post, new { enctype = "multipart/form-data", @id = "form_d" }))
{
<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="filesd" multiple /><br />
<button type="button">提交</button><br />
<span id="msg_d" style="color:red"></span>
}
</fieldset>
</div>
</body>
</html>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="http://7xn3fx.com1.z0.glb.clouddn.com/js/PlugTool/shenniu.upfile-0.0.1.js"></script>
<script>
$(function () {
//示例D代码
//初始化插件
var shenniu = new shenniu_UpFile({
url: "/Error/D_A",
fileEleName: "filesd"
});
//提交事件
$("#form_d button[type='button']").click(function () {
var msg = $("#msg_d");
var btnSave = $(this);
btnSave.attr("disabled", "disabled");
msg.html("上传中..");
//上传文件
shenniu.submitFun(function (data) {
try {
var result = JSON.parse(data);
//上传成功,保存数据
if (result.Status == 1) {
//增加上传成功的文件名称到表单
var hidFileNames = $("#form_d input[name='hidFileNames']");
if (hidFileNames.length <= 0) { $("#form_d").append("<input type='hidden' name='hidFileNames' value='" + result.Data + "'/>"); }
else {
hidFileNames.val(result.Data);
}
//获取表单键值对,提交表单数据
var param = $("#form_d").serialize();
var action = $("#form_d").attr("action");
$.post(action, param, function (res) {
msg.html(res.Status == 1 ? "保存成功<br/>" + res.Data : "保存失败");
});
} else {
msg.html(result.Data);
}
} catch (e) {
console.log(e.message);
} finally {
btnSave.removeAttr("disabled");
}
});
});
})
</script>