AngularJS教程十二—— 檔案上傳

檔案上傳ed-uploader

ed-uploader使用了angular-file-upload來進行上傳。

一 使用方法：

<div ed-uploader class="ng-uploader list" ng-model="files" data-options="accept: 'image/*', multiple: true" ed-upload-dir="自定義目錄"></div>

ed-uploader：定義檔案上傳指令，檔案會上傳到伺服器配置檔案中project.nginxControl所指定的目錄下。

• 通過data-options設定的屬性：
  • multiple：單選還是多選，預設false單選。單選時ng-model繫結的值為一個json，多選時為array
  • accept：允許上傳檔案型別，預設為*，用法同input file
• ed-upload-dir：指定attachment.path下特定的目錄，上面例項會儲存在attachment.path下“自定義目錄”目錄下

json格式為：

{
    author: "admin"
    name: "安全規範V1.2.docx"
    size: "2823324"
    time: "2016-01-29 17:29:29"
    type: "docx"
    path: "檔案儲存路徑，不包含檔案統一的資料夾，資料庫應該儲存這個路徑"
    url: "檔案下載完整路徑"
}

多選情況下，通過class='list'來控制多選時顯示檔案列表，單選和不加list則不顯示檔案列表（自己通過{{}}方式來繫結）。如圖：

如需上傳匯入，則可以監聽繫結$scope.$watch的值來再次提交匯入。