前端HTML代码:
<div>
@using (Html.BeginForm("BBB", "AAAA", FormMethod.Post, new { enctype = "multipart/form-data", id = "form" }))
{
<div class="uploads">
<table border="0">
<tr>
<td>
<input type="file" id="upload_file" name="upload_file" single accept="text/plain" />
</td>
<td>
<button type="submit" id="upload_button" class="btn btn-default" style="margin: 8px;">匯入</button>
<span style="color:red; font-size:10px;">請使用TXT檔導入</span>
</td>
</tr>
</table>
</div>
}
</div>
<div id="Level1"></div>
js代码:
使用ajax接收从后端传回前端的信息
引用jquery-form.js
<script src="~/assets/js/jquery-form.js"></script>
<script>
$('#form').ajaxForm(function (data) {
$("#Level1").empty();
var result = data.split('||');
if (result[0] == "success") {
$("#Level1").append(decodeURI(encodeURI(result[1])));
} else {
alert(result[1]);
}
})
</script>
Controller代码:后端接收前端传入的信息
public class AAAAController : Controller
{
[HttpPost]
public string BBB()
{
HttpPostedFileBase httpfile = Request.Files["upload_file"];
DataTable dt = new DataTable();
string result = "";
string lineList = "";
//判斷是否有上傳檔案
if (httpfile.ContentLength > 0)
{
string excelName = Path.GetFileName(httpfile.FileName);
string extension = Path.GetExtension(excelName);
//判斷是否為TXT檔
if (extension.ToUpper() == ".TXT")
{
if (!excelName.Contains(" "))
{
lineList = new StreamReader(httpfile.InputStream).ReadToEnd();
/* 数据处理逻辑
dt = xxxxxxx;
*/
if (dt != null)
{
try
{
result = "success||" + GetTableJson(dt);
}
catch (Exception ex)
{
result = "error||" + ex.Message;
}
}
}
else
{
result = "error||檔名不可有空白, 請刪除後再上傳.";
}
}
else
{
result = "error||請上傳 .txt格式的檔案";
}
}
else
{
result = "error||請選擇TXT檔案";
}
return Server.HtmlDecode(Server.HtmlEncode(result));
}
}
细节解说
使用form表单提交调用后端,enctype = "multipart/form-data"不可省略。
form表单提交只做提交,不会将后端的信息传回前端显示,这时可以使用jquery-form.js中的方法接收信息。
<input type="file" id="upload_file" name="upload_file" single accept="text/plain" />
single:只能选取一个文件上传,多个文件上传使用multiple="multiple"
accept="text/plain":规定上传的文件类型,上传带TXT后缀的文件