Dynamic CRM 2013學習筆記（十三）附件上傳 / 上傳附件

上傳附件多是CRM裏比較經常使用的一個需求了，本文將介紹如何在CRM裏實現附件的上傳、顯示及下載。包括如下幾個步驟：

• 附件上傳的web頁面
• 附件顯示及下載的附件實體
• 調用上傳web頁面的JS文件
• 實體上r的上傳按鈕

 

• 首先來看一下效果：

先點擊上面的上傳按鈕，而後就會彈出一個上傳附件的界面，選擇須要上傳的文件，填寫文件名，點擊上傳，成功後會在下面的文件grid裏顯示已上傳的文件，雙擊下面的文件就會打開文件的詳細信息：

而後還能夠下載文件。

 

• 下面來看下實現方法

1. 附件上傳的web頁面

新建一個普通的web程序，加上一個aspx頁面用於實現文件上傳，這裏用的是jquery裏的uplodify：

這是實現上傳的js代碼

  1:  $( document ).ready( function ()

  2:         {

  3:             uploadFiles();

  4:         } );

  5: 

  6:         function uploadFiles()

  7:         {

  8:             $( "#uploadify" ).uploadify( {

  9:                 'swf': 'Scripts/upload/uploadify.swf',

 10:                 'uploader': 'uploader.ashx',

 11:                 'queueID': 'fileQueue',

 12:                 'auto': false,

 13:                 'multi': true,

 14:                 'onUploadError': function ( file, errorCode, errorMsg, errorString )

 15:                 {

 16:                     alert( 'The file ' + file.name + ' could not be uploaded: ' + errorString );

 17:                 },

 18:                 'onUploadSuccess': function ( file, data, response )

 19:                 {

 20:                     $( '<li><a href="' + data + '">' + file.name + '</a></li>' ).appendTo( $( 'ul' ) );

 21:                 }

 22:             } );

 23:         }

 24: 

 25:         function Upload()

 26:         {

 27:             $( '#uploadify' ).uploadify( 'upload', '*' );

 28:         }

這是頁面上顯示的內容：

  1:   <table class="GbText">

  2:             <tr>

  3:                 <td>

  4:                    <input type="file" name="uploadify" id="uploadify" />

  5:                 </td>

  6:                 <td>

  7:                     <input type="button" value="Upload Files" class="uploadify-button" style="height:25px; width: 112px;"  onclick="javascript: $( '#uploadify' ).uploadify( 'upload', '*' )" />

  8:                     <input id="yes" class="Button" onclick="UpFiles();" onmouseout="this.className='Button'" onmouseover="this.className='Button-Hover'" style="width:50px" type="button" value="Confirm" />

  9:                 </td>

 10:             </tr>

 11:             <tr>

 12:                 <td colspan="2">

 13:                     <ul id="ul"></ul>

 14:                 </td>

 15:             </tr>

 16:         </table>

 17:     <div id="fileQueue">

最後把它放到ISV下面：

 

2. 附件實體

• 字段

紅框中的字段爲lookup類型，須要實現上傳功能的實體的id，其他爲基本字段

 

• 界面

中間紅框中是一個iframe, 其它沒什麼介紹的:

 

• 調用上傳web頁面的JS文件

  1: var uploadCfg = {

  2:     fileFloder: Xrm.Page.data.entity.getEntityName(),

  3:     entityReferenceName: Xrm.Page.data.entity.getEntityName() + "id",

  4:     entityName: Xrm.Page.data.entity.getEntityName().toLowerCase()

  5: };

  6: 

  7: function uploadFile() {

  8:     var openURL = "/ISV/FilesUpload/FileUpload.aspx?FileFolder=" + uploadCfg.fileFloder + "&EntityName=" + uploadCfg.entityName

  9:         + "&EntityReferenceName=" + uploadCfg.entityReferenceName + "&EntityId=" + Xrm.Page.data.entity.getId()

 10:         + "&UserId=" + Xrm.Page.context.getUserId();

 11:     window.showModalDialog(openURL, "_blank", "dialogWidth=500px;dialogHeight=300px;help:no;status:no");    //打開模態窗體

 12: }

 

 

• 上傳按鈕

添加按鈕並指定function名uploadFile

/_imgs/ribbon/AddConnection_16.png

uploadFile

$webresource:new_upload_file.js

 

 

 

Dynamic CRM 2013學習筆記 系列彙總