前言:公司前端都是index頁面引用js,剩下的添加。。。都是html頁。加大操作難度5555,所以就是主頁面操作子頁面上傳。效果如下:
1,前端html頁代碼如下 。其中請注意,form中enctype="multipart/form-data",必須使用form-data傳值。並且html5可直接在input標簽file控件中設置accept屬性限制上傳文件類型,設置multiple屬性可同時上傳多個文件。如果是頁面為cshtml,則可以直接設置上傳按鈕的data-bind="click:事件名稱"進行事件的綁定,因為頁面為html頁,我在js中處理綁定
<form id="importFileForm" enctype="multipart/form-data"> <table class="dialog-table"> <tbody> <tr> <td class="col-name">上傳照片:</td> <td> <input type="file" class="easyui-filebox" id="fileImport" name="fileImport" style="width:260px;"> <a id="uploadFile" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" href="#">上傳</a> </td> </tbody> </table> </form>
2,下面是js代碼,其中box為子窗體對象,若為cshtml即可直接用$獲取對象,其中獲取file對象為var file = document.getElementById('fileImport').files[0];form數據即為new FormData($("#importFileForm")[0]);
1 function initAdd($box) { 2 $box.find("#uploadFile").bind('click', function (e) { 3 // file對象 4 var file = $box.find("#fileImport")[0].files[0]; 5 //判斷控件中是否存在文件內容,如果不存在,彈出提示信息,阻止進一步操作 6 if (file == null) { alert('錯誤,請選擇文件'); return; } 7 8 //獲取文件名稱 9 var fileName = file.name; 10 //獲取文件類型名稱 11 var file_typename = fileName.substring(fileName.lastIndexOf('.'), fileName.length); 12 13 var p = $box.find("#importFileForm"); 14 //獲取form數據 15 var formData = new FormData(p[0]); 16 17 $.ajax({ 18 url: "/YGXX/YGGL/PostExcelData", 19 type: 'POST', 20 data: formData, 21 async: false, 22 cache: false, 23 contentType: false, 24 processData: false, 25 success: function (returnInfo) { 26 alert(1); 27 }, 28 error: function (returnInfo) { 29 alert(0); 30 } 31 }); 32 }); 33 }
3,Controller代碼
1 [HttpPost] 2 public string PostExcelData() 3 { 4 //獲取客戶端上傳的文件集合 5 HttpFileCollection files = System.Web.HttpContext.Current.Request.Files; 6 //獲取文件集合中的第一個文件(每次只上傳一個文件) 7 HttpPostedFile file = files[0]; 8 //定義文件存放的目標路徑 9 string targetDir = System.Web.HttpContext.Current.Server.MapPath("~/Content/touxiang"); 10 11 //組合成文件的完整路徑 12 string path = System.IO.Path.Combine(targetDir, System.IO.Path.GetFileName(file.FileName)); 13 //保存上傳的文件到指定路徑中 14 file.SaveAs(path); 15 return path; 16 }
結語:
菜鳥技能,請大神指點。