MVC项目使用easyui的filebox控件上传文件.docx

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=trueform id=importFileForm method=postenctype=multipart/form-data style=display:nonetable style=margin:5px;height:70px;trtd请选择文件/tdtd width=5px;/tdtdinput type=file class=easyui-filebox id=fileImport name=fileImport style=width:260px;/tdtd/td/trtrtd colspan=4label id=fileName//td/trtrtd colspan=4label id=uploadInfo//td/tr/tablediv style=text-align:center;clear:both;margin:5px;a id=uploadFile class=easyui-linkbutton data-options=iconCls:icon-ok data-bind=click:importFileClickhref=javascript:void(0)上传/aa class=easyui-linkbutton data-options=iconCls:icon-cancel data-bind=click:closeImportClickhref=javascript:void(0)关闭/a/div/form/div2.ViewModel中js代码:定义上传事件。注意使用ajax请求时，需要设置contentType: multipart/form-data //导入事件，显示导入弹出窗口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; }//获取文件名称varfileName = ;//获取文件类型名称varfile_typename = fileName.substring(fileName.lastIndexOf(.), fileName.length);//这里限定上传文件文件类型必须为.xlsx，如果文件类型不符，提示错误信息if (file_typename == .xlsx) {//计算文件大小varfileSize = 0;//如果文件大小大于1024字节X1024字节，则显示文件大小单位为MB，否则为KBif (file.size 1024 * 1024) {　　　　　　　　　　fileSi