Dynamics CRM 365中结合注释和WebApi实现图片上传
首先需要在实体上使用注释，然后在窗体上引用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实现图片上传的更多相关文章
- IOS5开发-http get/post调用mvc4 webapi互操作(图片上传)[转]
IOS5开发-http get/post调用mvc4 webapi互操作(图片上传) 目前最流行的跨平台交互是采用http协议通过JSON对象进行互操作.这种方式最简单,也很高效.webservi ...
- MVC4中基于bootstrap和HTML5的图片上传Jquery自定义控件
场景:mvc4中上传图片,批量上传,上传前浏览,操作.图片进度条. 解决:自定义jquery控件 没有解决:非图片上传时,会有浏览样式的问题; 解决方案; 1.样式 – bootstrap 的css和 ...
- Silverlight中的拖拽实现的图片上传
原文 http://blog.csdn.net/dujingjing1230/article/details/5443003 在Silverlight中因为可以直接从系统的文件夹里面拖出来一个文件直接 ...
- 在php中使用jquery uploadify进行多图片上传
jquery uploadify是一款Ajax风格的批量图片上传插件,在PHP中使用jquery uploadify很方便,请按照本文介绍的方法和步骤,为你的PHP程序增加jquery uploadi ...
- Android开发中使用七牛云存储进行图片上传下载
Android开发中的图片存储本来就是比较耗时耗地的事情,而使用第三方的七牛云,便可以很好的解决这些后顾之忧,最近我也是在学习七牛的SDK,将使用过程在这记录下来,方便以后使用. 先说一下七牛云的存储 ...
- Dynamics CRM 修改Excel 最大导出记录限制及 最大上传文件限制
CRM默认的Excel最大导出记录是10000条,最大上传文件限制为5m. 这样的限制可以满足少量数据的批量更新,但是如果数据量比较大的话需要修改最大的导出记录限制,和上传文件的大小,网上有的是直接修 ...
- .NET WebAPI 实现图片上传（包括附带参数上传图片）
博主的项目,客户端是APP,考虑到以后也可能会应用到微信端.网站等,图片上传方法就需要兼容多端,并且以目前的设计,不允许非登录用户上传图片,就得在上传时解决附带参数上传图片的问题. 先来看看后台方法( ...
- Dynamics CRM 365 不用按钮工具，直接用js脚本控制按钮的显示隐藏
Dynamics CRM 365 不用按钮工具,直接用js脚本控制按钮的显示隐藏: try { // 转备案按钮 let transferSpecialRequestButton = parent.p ...
- C#设计模式总结 C#设计模式(22)——访问者模式（Vistor Pattern） C#设计模式总结 .NET Core launch.json 简介 利用Bootstrap Paginator插件和knockout.js完成分页功能 图片在线裁剪和图片上传总结 循序渐进学.Net Core Web Api开发系列【2】：利用Swagger调试WebApi
C#设计模式总结 一. 设计原则 使用设计模式的根本原因是适应变化,提高代码复用率,使软件更具有可维护性和可扩展性.并且,在进行设计的时候,也需要遵循以下几个原则:单一职责原则.开放封闭原则.里氏代替 ...
随机推荐
- remote: error: hook declined to update refs/heads
打开工程目录下.git/config文件,补充user信息 , [user] username = xxx email = xxx@126.com 打开工程目录下.git/description文件, ...
- 第2章 Java并行程序基础（三）
2.8 程序中的幽灵:隐蔽的错误 2.8.1 无提示的错误案例 以求两个整数的平均值为例.请看下面代码: int v1 = 1073741827; int v2 = 1431655768; Syste ...
- Go语言实现：【剑指offer】重建二叉树
该题目来源于牛客网<剑指offer>专题. 输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树.假设输入的前序遍历和中序遍历的结果中都不含重复的数字.例如输入前序遍历序列{1,2,4 ...
- 十篇笔记走向Python测试开发之路四（字典）
字典 字典(dict)是Python的一种内置的数据结构.在其他语言中也称为map,使用键-值(key-value)存储,可以通过查找某个特定的词语(键 key),从而找到他的定义(值 value) ...
- springboot 日志 logback输出
1.首先在 application,yaml中添加 logging: config: classpath:logback-spring.xml 2.之后在resources中添加 logback-sp ...
- lwip 2.0.2 snmp mib ipv6
1.3.6.1.2.1 - SNMP MIB-2 Submitted by Harald.T.Alvestrand at uninett.no from host aun.uninett.no (12 ...
- tomcat 访问权限设置
1.全局设置,设置允许某些IP能够访问到tomcat服务器,或不能访问tomcat服务器 只需要编辑tomcat的server.xml,增加适当代码即可. 修改如下:在<Host> &l ...
- .NET Core之单元测试（四）：Fluent Assertions的使用
目录 什么是Fluent Assertions 待测试API 测试用例 什么是Fluent Assertions Fluent Assertions 是 .NET 平台下的一组扩展方法,用于单元测试中 ...
- 迁移桌面程序到MS Store（14）——APPX嵌入WCF Service以Admin权限运行
Windows10 1809版本开始,微软又对UWP开放了新的Capability:AllowElevation. 通过这个新的Capability,UWP APP能够在运行时向用户请求Admin权限 ...
- Vue.js 从源码理解v-for和v-if的优先级的高低
在vue.js里面,v-for和v-if是可以一起使用作用在某个元素上,网上看到一篇文章说永远不要把v-for和v-if同时用在同一个元素上,感觉有点瞎扯,官网也注明了可以一起使用的,还把两个指令的优 ...