本文转载自: https://www.cnblogs.com/mora1988/p/5546489.html 作者:mora1988 转载请注明该声明。

开发环境: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,否则为KBif (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 > 0){//获取文件集合中的第一个文件(每次只上传一个文件)HttpPostedFile file = files[0];//定义文件存放的目标路径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控件上传文件相关推荐

  1. asp.net fileupload 文件上传后服务器上找不到文件,Asp.net中FileUpload控件上传文件例子...

    FileUpload 控件显示一个文本框控件和一个浏览按钮,使用户可以选择客户端上的文件并将它上载到 Web 服务器.用户通过在控件的文本框中输入本地计算机上文件的完整路径(例如,C:\MyFiles ...

  2. ASP.NET 2.0使用FileUpload控件上传文件示例

    在ASP.NET 2.0中使用FileUpload服务器控件很容易的就能将文件上传到服务器,一个简单的例子如下: aspx: 程序代码 <%@ Page Language="C#&qu ...

  3. .Net用UploadFile控件上传文件受到大小限制的解决办法

    一.缘由因.net引起的 方法一:(经过验证了) 错误提示: System.ObjectDisposedException: 无法访问已关闭的文件. 解决办法: 在web.config文件中添加如下语 ...

  4. 使用 SAP UI5 FileUploader 控件上传本地文件试读版

    一套适合 SAP UI5 初学者循序渐进的学习教程 作者简介 Jerry Wang,2007 年从电子科技大学计算机专业硕士毕业后加入 SAP 成都研究院工作至今.Jerry 是 SAP 社区导师,S ...

  5. 详述FileUpload 控件上传单文件

    第一步:添加两个Label控件,一个是用于标题显示,一个是用于上传完成消息提示. 第二步:创建一个FileUpload控件到Page页面,注意FileUpload控件本身只提供文件的选举操作,而实际的 ...

  6. 解决FileUpload控件上传大文件被拒问题时

    在使用Asp.Net自带的服务器端控件Fileupload上传文件时,如果上传的文件比较大,可能会遇到服务器的拒绝服务攻击,此时可以通过在<system.web>中添加: <http ...

  7. 母版中menu控件上传后出现脚本错误

    这几天帮朋友做个小网站,为了网站更容易扩展,所以使用了.menu控件做网站导行.本来在做的时候没出错,可上 传之后却显示不出,动态菜单的部分,并且提示脚本错误.于是乎上网开始找答案,找了大半天.终于找 ...

  8. 如何在Spring-Boot项目中配置资源文件夹?视频文件不想放在项目中,怎么做?前台上传文件后台如何访问?什么是资源文件夹?

    如何在Spring-boot项目配置资源文件夹 前言 2.properties文件 二.访问 1.放入资源 2.访问 方式1 方式2 前言 在什么情况下需要配置资源文件夹? 当项目需要读取静态文件夹以 ...

  9. 使用FileUpload控件上传前预览图片

    <table class="blue_table" cellpadding="0" cellspacing="0" border=&q ...

  10. Ajax+Input的File控件上传时的超级简单实时进度条

    Html代码: <input id="inputFile" name="inputFile" type="file" />< ...

最新文章

  1. 机器人时代的资本主义:21世纪的工作,收入和财富
  2. 标记三维点_细胞器相互作用过程的高速三维全景成像
  3. Node初学(二)Promise/Deferred模式,异步调用
  4. safari浏览器横屏怎么设置_Safari浏览器的几个小技巧你掌握了吗?
  5. Python笔记(6)-输入输出
  6. python线程(二)代码部分Threading模块
  7. 黔东南天气预报软件测试,黔东南天气预报15天
  8. R语言学堂开通付费咨询业务了~~
  9. 探索SSMS中SQL Server索引属性
  10. git remote 命令的用法
  11. SSH与EJB 比较
  12. MATLAB常用画图命令汇总【已坑】
  13. 单片机c语言开关,10手把手教你学单片机的C语言程序设计_开关语句和循环语句.pdf...
  14. ui设计 原则 要素_ui设计原则
  15. JEP 379:将低暂停时间的垃圾收集器Shenandoah推向生产
  16. 北洋园pt---一个好用的pt网站
  17. 11尺寸长宽 iphone_iPhone11屏幕尺寸
  18. 【DNS】Windows查看和清理DNS缓存
  19. HPROSE PRC通讯
  20. CAS到底是怎么回事

热门文章

  1. hdu4747(求mex区间之和)
  2. 计算机自动维护有用吗,Win10系统关闭自动维护功能提高系统运行速度
  3. C#wmp.dll自动注册失败
  4. Android学习笔记——文件路径(/mnt/sdcard/...)、Uri(content://media/external/...)学习
  5. Secondary NameNode:它究竟有什么作用?
  6. Verilog学习之路(1)— Quartus II 13.0下载安装和HelloWorld
  7. 今天电脑突然出现问题: 请安装 TCP/IP 协议 错误 10106 【已解决·】
  8. iphonex适配游戏_Unity+iPhoneX适配方案
  9. 用SVM预测股票涨跌 - 免费分享全套代码
  10. 【Scratch考级99图】图36-等级考试scratch绘制复杂图形中间带凸点正方形花 少儿编程 scratch画图案例教程