asp.net MVC+easyUI 文件上傳


   前言:公司前端都是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         }

結語:

  菜鳥技能,請大神指點。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM