首先需要在实体上使用注释，然后在窗体上引用WebResource。

WebResource的代码：

 <!DOCTYPE html>

 <html>

 <head>

     <title>上传图片</title>

     <style>

         ul,

         li {

             list-style: none;

             margin: 0;

         }

         .image-list {

             margin-top: 6px;

             overflow: hidden;

             padding-left: 0;

         }

             .image-list li {

                 float: left;

                 margin-right: 8px;

                 width: 108px;

                 height: 100px;

                 position: relative;

             }

                 .image-list li img {

                     width: 100px;

                     height: 100px;

                 }

                 .image-list li .delete {

                     display: block;

                     position: absolute;

                     top: 0;

                     right: 0;

                     width: 20px;

                     height: 20px;

                     font-size: 18px;

                     text-align: center;

                     line-height: 20px;

                     border-radius: 50%;

                     color: #fff;

                     background-color: brown;

                     cursor: pointer;

                 }

         .add-pluse {

             background: url(data:image/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABI0lEQVRoQ+1Xyw2CUBAcCGdjCxw2JJ7sQK3A2BEWYR3GCtQOvJI90ILxTNBoiPGA4e3jESUZj7jfmdlliTDyXzTy+sEGfs0gGSADPRGghNoALMtyWlXV/vlfkiSbNE2vPYH+6j4IA6q6BHBssq5E5MQGviBABtqAoYQMA0MJUUIGubSZUkKUECXUE4G/l1BRFHkcxwtjn1MA88bnAsB0jdZ1fc6yLHfJ2bmFVPXuEii0jYh01vbM2WmkqjMAO2OBvRgAsHU9wTsbMBb+MucxZ0CNDPz9GjWw+TblDBhQ4wxwBgxy4QeNK1jcQq5IuRxzhlif74EJgEPzYC0iN584Lj6DrFGXxKFs2EAoJH3jkAFf5EL5kYFQSPrGIQO+yIXyGz0DD07rnzHZA1b2AAAAAElFTkSuQmCC) no-repeat;

             background-position: top 20px center;

             background-size: 40px 40px;

             background-color: #f4f4f4;

             position: relative;

         }

             .add-pluse .tips {

                 margin: 53px 0 0;

                 font-size: 14px;

                 color: #b9b9b9;

                 text-align: center;

             }

             .add-pluse input {

                 position: absolute;

                 top: 0;

                 left: 0;

                 right: 0;

                 bottom: 0;

                 opacity: 0;

             }

     </style>

 </head>

 <body>

     <ul id="imageList" class="image-list">

     </ul>

     <script type="text/javascript">

         window.Xrm = window.parent.Xrm;

         var entityId = formatGuid(Xrm.Page.data.entity.getId());

         var entityName = Xrm.Page.data.entity.getEntityName();

         var entitySetName = Xrm.Page.data.entity.getEntitySetName();

         //加载数据

         function loadData() {

             var ulObj = document.getElementById("imageList");

             if (ulObj) {

                 ulObj.innerHTML = '<li class="add-pluse">' +

                     '<input type="file" id="file" onchange="uploadNoteImage()"/>' +

                     '<p class="tips">点击上传图片</p>' +

                     '</li>';

             }

             Xrm.WebApi.retrieveMultipleRecords("annotation",

                 "?$select=annotationid,documentbody,mimetype&" +

                 "$filter=_objectid_value eq " + entityId +

                 " and isdocument eq true and startswith(mimetype, 'image/')&" +

                 "$orderby=createdon asc").then(

                     function success(result) {

                         if (result.entities) {

                             for (var i = 0; i < result.entities.length; i++) {

                                 var newLi = document.createElement("li");

                                 var note = result.entities[i];

                                 newLi.innerHTML = '<span class="delete" onclick="deleteImage(\'' + note.annotationid +

                                     '\')">×</span>' +

                                     '<img src="' + getNoteImageSrc(note) + '"/>';

                                 ulObj.append(newLi);

                             }

                         }

                     },

                     function (error) {

                         Xrm.Utility.alertDialog(error.message);

                     }

                 );

         };

         //删除图片

         function deleteImage(id) {

             Xrm.WebApi.deleteRecord("annotation", id).then(

                 function success(result) {

                     loadData();

                 },

                 function (error) {

                     Xrm.Utility.alertDialog(error.message);

                 }

             );

         }

         //将图片保存至注释

         function uploadNoteImage() {

             var file = document.getElementById("file").files[0];

             var subject = "";

             var desc = "";

             if (file) {

                 var reader = new FileReader();

                 reader.onload = function (evt) {

                     var str = arrayBufferToBase64(reader.result);

                     createNote(subject, desc, str, file.name, file.type);

                 }

                 reader.readAsArrayBuffer(file);

             }

         }

         //创建注释记录

         function createNote(title, description, docBody, fName, mType) {

             var entity = {};

             if (docBody != null & fName != null & mType != null) {

                 entity.documentbody = docBody;

                 entity.filename = fName;

                 entity.mimetype = mType;

             }

             entity.subject = title;

             entity.notetext = description;

             entity["objectid_" + entityName + "@odata.bind"] = "/" + entitySetName + "(" + entityId + ")";

             Xrm.WebApi.createRecord("annotation", entity).then(

                 function success(result) {

                     loadData();

                 },

                 function (error) {

                     Xrm.Utility.alertDialog(error.message);

                 }

             );

         }

         //获取图片地址

         function getNoteImageSrc(note) {

             if (note) {

                 var mimeType = note.mimetype;

                 var documentBody = note.documentbody;

                 var src = "data:" + mimeType + ";base64," + documentBody;

                 return src;

             }

             return "";

         }

         //将图片转换为BASE64字符串

         function arrayBufferToBase64(buffer) {

             var binary = '';

             var bytes = new Uint8Array(buffer);

             var len = bytes.byteLength;

             for (var i = 0; i < len; i++) {

                 binary += String.fromCharCode(bytes[i]);

             }

             return window.btoa(binary);

         }

         //格式化GUID

         function formatGuid(guid) {

             return guid.replace("{", "").replace("}", "");

         }

         loadData();

     </script>

 </body>

 </html>

实现效果图：

参考文章：https://scaleablesolutions.com/upload-notes-attachments-using-javascript-and-rest/

Dynamics CRM 365中结合注释和WebApi实现图片上传的更多相关文章

  1. IOS5开发-http get/post调用mvc4 webapi互操作(图片上传)[转]

    IOS5开发-http get/post调用mvc4 webapi互操作(图片上传)   目前最流行的跨平台交互是采用http协议通过JSON对象进行互操作.这种方式最简单,也很高效.webservi ...

  2. MVC4中基于bootstrap和HTML5的图片上传Jquery自定义控件

    场景:mvc4中上传图片,批量上传,上传前浏览,操作.图片进度条. 解决:自定义jquery控件 没有解决:非图片上传时,会有浏览样式的问题; 解决方案; 1.样式 – bootstrap 的css和 ...

  3. Silverlight中的拖拽实现的图片上传

    原文 http://blog.csdn.net/dujingjing1230/article/details/5443003 在Silverlight中因为可以直接从系统的文件夹里面拖出来一个文件直接 ...

  4. 在php中使用jquery uploadify进行多图片上传

    jquery uploadify是一款Ajax风格的批量图片上传插件,在PHP中使用jquery uploadify很方便,请按照本文介绍的方法和步骤,为你的PHP程序增加jquery uploadi ...

  5. Android开发中使用七牛云存储进行图片上传下载

    Android开发中的图片存储本来就是比较耗时耗地的事情,而使用第三方的七牛云,便可以很好的解决这些后顾之忧,最近我也是在学习七牛的SDK,将使用过程在这记录下来,方便以后使用. 先说一下七牛云的存储 ...

  6. Dynamics CRM 修改Excel 最大导出记录限制及 最大上传文件限制

    CRM默认的Excel最大导出记录是10000条,最大上传文件限制为5m. 这样的限制可以满足少量数据的批量更新,但是如果数据量比较大的话需要修改最大的导出记录限制,和上传文件的大小,网上有的是直接修 ...

  7. .NET WebAPI 实现图片上传（包括附带参数上传图片）

    博主的项目,客户端是APP,考虑到以后也可能会应用到微信端.网站等,图片上传方法就需要兼容多端,并且以目前的设计,不允许非登录用户上传图片,就得在上传时解决附带参数上传图片的问题. 先来看看后台方法( ...

  8. Dynamics CRM 365 不用按钮工具，直接用js脚本控制按钮的显示隐藏

    Dynamics CRM 365 不用按钮工具,直接用js脚本控制按钮的显示隐藏: try { // 转备案按钮 let transferSpecialRequestButton = parent.p ...

  9. C#设计模式总结 C#设计模式(22)——访问者模式（Vistor Pattern） C#设计模式总结 .NET Core launch.json 简介 利用Bootstrap Paginator插件和knockout.js完成分页功能 图片在线裁剪和图片上传总结 循序渐进学.Net Core Web Api开发系列【2】：利用Swagger调试WebApi

    C#设计模式总结 一. 设计原则 使用设计模式的根本原因是适应变化,提高代码复用率,使软件更具有可维护性和可扩展性.并且,在进行设计的时候,也需要遵循以下几个原则:单一职责原则.开放封闭原则.里氏代替 ...

随机推荐

  1. WeChall_PHP 0817 (PHP, Exploit)

    I have written another include system for my dynamic webpages, but it seems to be vulnerable to LFI. ...

  2. 基于python2+selenium3+pytest4的UI自动化框架

    环境:Python2.7.10, selenium3.141.0, pytest4.6.6, pytest-html1.22.0, Windows-7-6.1.7601-SP1 特点:- 二次封装了s ...

  3. drf路由分发、解析/渲染模块配置、使用admin、自动序列化配置

    目录 drf路由分发配置 解析模块配置 渲染模块配置 浏览器渲染打开 浏览器渲染关闭 结论 drf使用后台admin drf序列化模块 serializers.py: views.py:单查群查 测试 ...

  4. 在centos6.3下安装php的Xdebug

    首先下载一个xdebug http://www.xdebug.org/docs/ 官网上有windos版本和linux源码版本的,我们下载一个源码包xdebug-2.2.5.tgz 然后进入安装流程 ...

  5. Thread Based Parallelism - Thread Synchronization With a Condition

    Thread Based Parallelism - Thread Synchronization With a Condition from threading import Thread, Con ...

  6. php 上传文件 示例

    <?php header("content-type:text/html;charset=utf-8"); error_reporting(E_ALL); //session ...

  7. javascript 动态加载javascript文件

    /* loadFile(data, callback): 动态加载js文件 data: 存放需要加载的js文件的url("url" || ["url", &qu ...

  8. OSPF笔记——LSA及其字段，及其作用

    Link State ID Link State ID remains at 32 bits in length, Link State ID has shed any addressing sema ...

  9. 高并发之——不得不说的线程池与ThreadPoolExecutor类浅析

    一.抛砖引玉 既然Java中支持以多线程的方式来执行相应的任务,但为什么在JDK1.5中又提供了线程池技术呢?这个问题大家自行脑补,多动脑,肯定没坏处,哈哈哈... 说起Java中的线程池技术,在很多 ...

  10. WinBox软路由的自定义IP设定

             软路由ros(MIKRTIK)安装简单步骤 由于本主也是刚刚接触软路由这个硬件方面的知识.所以也是略知皮毛而已,今天通过网上的学习,然后自己总结了一下怎么在软路由中设定一个自定义IP ...