MVC项目使用easyui的filebox控件上传文件
开发环境:WIN10+IE11,浏览器请使用IE10或以上版本
开发技术框架MVC4+JQuery Easyui+knockoutjs
效果为弹出小窗体,如下图
1.前端cshtml文件代码(只包含文件上传窗体)。注意form设置,必须使用form-data传递文件。注意按钮事件我这里是封装的data-bind="click:closeImportClick",不要照抄
html5可直接在input标签file控件中设置accept属性限制上传文件类型,设置multiple属性可同时上传多个文件
<div class="easyui-window" id="import-excel-template" title="文件上传" style="width:400px;height:160px;padding:2px;" closed="true">
<form id="importFileForm" method="post" enctype="multipart/form-data" style="display:none">
<table style="margin:5px;height:70px;">
<tr>
<td>请选择文件</td>
<td width="5px;"></td>
<td><input type="file" class="easyui-filebox" id="fileImport" name="fileImport" style="width:260px;"></td>
<td></td></tr>
<tr>
<td colspan="4"><label id="fileName" /></td>
</tr>
<tr>
<td colspan="4">
<label id="uploadInfo" />
</td>
</tr>
</table><div style="text-align:center;clear:both;margin:5px;">
<a id="uploadFile" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" data-bind="click:importFileClick" href="javascript:void(0)">上传</a>
<a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" data-bind="click:closeImportClick" href="javascript:void(0)">关闭</a>
</div>
</form>
</div>
2.ViewModel中js代码:定义上传事件。注意使用ajax请求时,需要设置contentType: false,否则chrome和firefox不兼容
//导入事件,显示导入弹出窗口
this.importClick = function ()
{
$('#import-excel-template').window('open')
document.getElementById("importFileForm").style.display = "block";
}
//关闭导入弹出窗口
this.closeImportClick = function () {
document.getElementById('fileImport').value = null;
document.getElementById('fileName').innerHTML = "";
document.getElementById('uploadInfo').innerHTML = "";
$('#import-excel-template').window('close')
} //导入文件
this.importFileClick = function ()
{
//获取上传文件控件内容
var file = document.getElementById('fileImport').files[0];
//判断控件中是否存在文件内容,如果不存在,弹出提示信息,阻止进一步操作
if (file == null) { alert('错误,请选择文件'); return; }
//获取文件名称
var fileName = file.name;
//获取文件类型名称
var file_typename = fileName.substring(fileName.lastIndexOf('.'), fileName.length);
//这里限定上传文件文件类型必须为.xlsx,如果文件类型不符,提示错误信息
if (file_typename == '.xlsx')
{
//计算文件大小
var fileSize = 0;
//如果文件大小大于1024字节X1024字节,则显示文件大小单位为MB,否则为KB
if (file.size > 1024 * 1024) {
fileSize = Math.round(file.size * 100 / (1024 * 1024)) / 100;
if (fileSize > 10) {
alert('错误,文件超过10MB,禁止上传!'); return;
}
fileSize = fileSize.toString() + 'MB';
}
else {
fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
}
//将文件名和文件大小显示在前端label文本中
document.getElementById('fileName').innerHTML = "<span style='color:Blue'>文件名: " + file.name + ',大小: ' + fileSize + "</span>";
//获取form数据
var formData = new FormData($("#importFileForm")[0]);
//调用apicontroller后台action方法,将form数据传递给后台处理。contentType必须设置为false,否则chrome和firefox不兼容
$.ajax({
url: "/api/Product/NewMaterialImport/PostExcelData",
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function (returnInfo) {
//上传成功后将控件内容清空,并显示上传成功信息
document.getElementById('fileImport').value = null;
document.getElementById('uploadInfo').innerHTML = "<span style='color:Red'>" + returnInfo + "</span>";
},
error: function (returnInfo) {
//上传失败时显示上传失败信息
document.getElementById('uploadInfo').innerHTML = "<span style='color:Red'>" + returnInfo + "</span>";
}
});
}
else {
alert("文件类型错误");
//将错误信息显示在前端label文本中
document.getElementById('fileName').innerHTML = "<span style='color:Red'>错误提示:上传文件应该是.xlsx后缀而不应该是" + file_typename + ",请重新选择文件</span>"
}
}
3.apicontroller代码
/// <summary>
/// 将文件上传到指定路径中保存
/// </summary>
/// <returns>上传文件结果信息</returns>
[System.Web.Http.HttpPost]
[ValidateInput(false)]
public string PostExcelData()
{
string info = string.Empty;
try
{
//获取客户端上传的文件集合
HttpFileCollection files = System.Web.HttpContext.Current.Request.Files;
//判断是否存在文件
if (files.Count > )
{
//获取文件集合中的第一个文件(每次只上传一个文件)
HttpPostedFile file = files[];
//定义文件存放的目标路径
string targetDir = System.Web.HttpContext.Current.Server.MapPath("~/FileUpLoad/Product");
//创建目标路径
ZFiles.CreateDirectory(targetDir);
//组合成文件的完整路径
string path = System.IO.Path.Combine(targetDir, System.IO.Path.GetFileName(file.FileName));
//保存上传的文件到指定路径中
file.SaveAs(path);
info = "上传成功";
}
else
{
info = "上传失败";
}
}
catch
{
info= "上传失败";
}
return info;
}
MVC项目使用easyui的filebox控件上传文件的更多相关文章
- c#上传文件(一)使用 .net 控件上传文件
1.html代码: <body> <form id="form1" runat="server"> <div> <as ...
- python3、selenium、autoit3,通过flash控件上传文件
autoit.au3 #include <Constants.au3> WinWait(); //暂停执行脚本,直到上传对话框出现 WinActive("打开") Wi ...
- asp.net FileUpload 控件上传文件 以二进制的形式存入数据库并将图片显示出来
图片上传事件代码如下所示: byte[] binary = upload.FileBytes; StringBuilder sqlStrSb = new StringBuilder(); sqlStr ...
- 在Update Panel 控件里面添加 File Upload 控件 上传文件
Detail Information:http://www.codeproject.com/Articles/482800/FileplusUploadplusinplusUpdateplusPane ...
- FileUpload的控件上传excel
在一个使用FileUpload的控件上传excel,读取excel的数据 因为上传的路径一直被限定在C:\Program\IIS\Express 一直限制这个文件下, 想要解决这个问题. 在谷歌浏览器 ...
- .net简单的fileupload控件上传
前台代码: <asp:FileUpload ID="FileUpload1" runat="server" /> <asp:Button ID ...
- JS ajaxfileUpload 一次性上传多个input控件 上传多个文件
本方法适用于一次性上传多个input框输入的文件,如下图所示,任务是需要一次上传两个input框提供的两个文件. 具体方法: 1.修改ajax调用方法 如上图所示,只需要将ajaxFileUpload ...
- WebForm使用FileUpload控件上传压缩二进制图片
fuImage 是FileUpload页面控件 ImageHelper.CompressionImage(fuImage.FileBytes, quality); /// <summary> ...
- 【SpringMVC】【EasyUI】关于使用EasyUIForm上传文件,返回JsonIE提示下载文件的解决办法!
先说一下环境 EasyUI+SpringMVC+MyBatis 因为按正常手段,无法使用Ajax来提交一个包含文件的表单,故想到利用EasyUI的Form来提交,EasyUI的form封装了一套伪Aj ...
随机推荐
- POJ3160 Father Christmas flymouse[强连通分量 缩点 DP]
Father Christmas flymouse Time Limit: 1000MS Memory Limit: 131072K Total Submissions: 3241 Accep ...
- PHP的魔法方法__set() __get()
php的魔法方法__set()与__get() Tags: PHP 我们先来看看官方的文档如何定义他们的: public void __set(string $name, mixed $value); ...
- 使用codemodel生成Java代码
例子 JCodeModel cm = new JCodeModel(); JDefinedClass dc = cm._class("foo.Bar"); dc.annotate( ...
- 在IIS中实现JSP
在IIS中实现JSP IIS本身是不可以支持JSP页面的,但是随着JAVA技术的广泛应用,越来越多的网站采用JAVA技术编写程序,我们根据一些资料和自己的实践经验总结了以下两种JAVA应用服务器 ...
- WPF中监视DependencyProperty的变化
WPF中监视DependencyProperty的变化 周银辉 尽管一个类会提供很多事件,但有时候还是显得不够,比如说前两天我就以为WPF的ListBox控件会有ItemsSourceChange ...
- IIS部署SSL,.crt .key 的证书,怎么部署到IIS,记录一下,以免忘记。
SSL连接作用不说,百度很多.因为最近想考虑重构一些功能,在登录这块有打算弄成HTTPS的,然后百度了,弄成了,就记录一下,以便以后万一部署的时候忘记掉. 做实验的时候,拿的我个人申请的已经备案的域名 ...
- 移动UI设计
移动应用UI设计模式 第二版 导航:跳板式,菜单式,选项卡式(微信)等 表单:登录表单,多步骤表单(递进式),计算表单,搜索表单,长表单等 表格:无表头表格,概览+数据型表格等 搜索:隐式搜索(滴滴打 ...
- Hbase集群master.HMasterCommandLine: Master exiting
2016-12-15 17:01:57,473 INFO [main] impl.MetricsSystemImpl: HBase metrics system started 2016-12-15 ...
- javascript变量声明 及作用域
javascript变量声明提升(hoisting) http://openwares.net/js/javascript_declaration_hoisting.html 可能要FQ一下 java ...
- sql 知识点系统汇总
提供性能: .服务器往往具有强大的计算能力和速度..避免把大量的数据下载到客户端,减少网络上的传输量. 第一章 T-SQL 语句 1.1数据类型 文本型 -- CHAR 定长型 <=8000字节 ...