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#设计模式总结 一. 设计原则 使用设计模式的根本原因是适应变化,提高代码复用率,使软件更具有可维护性和可扩展性.并且,在进行设计的时候,也需要遵循以下几个原则:单一职责原则.开放封闭原则.里氏代替 ...
随机推荐
- sc,sockname = sock.accept()
tcpSerSock.accept()返回两个结果,第一个放入tcpClisock,第二个放入addr. 这是python特有的语法.可以接收多个返回值.
- Idea使用插件实现逆向工程搭建SpringBoot项目
之前写SpringBoot项目,每次都要手动去写实体类.dao层啥的,尤其是数据库表字段特别多的时候,特别麻烦.然后很多小伙伴都会用逆向工程来自动生成这些类,省去许多没必要的代码量,但是Mybatis ...
- Codeforces 1138B Circus (构造方程+暴力)
题意: 给你两个01串,要你选n/2个位置,使得选的位置在s1中"1"的数量等于未选的s2中"1"的数量 n<=5000,1s 思路: 设两个串中出现&q ...
- java11类和对象
import java.util.Scanner; public class jh_01_如何认识事物 { public static void main(String[] args) { Scann ...
- Deeplab
Deeplab系列是谷歌团队的分割网络. DeepLab V1 CNN处理图像分割的两个问题 下采样导致信息丢失 maxpool造成feature map尺寸减小,细节信息丢失. 空间不变性 所谓空间 ...
- IniRealm讲解
Shiro自定义Realm 内置Realm: user.ini [users] Mark=123456,admin [roles] admin=user:delete,user:update IniR ...
- TestStand 基础知识[7]--Build-in Step Types (2)
接着上一篇文章:TestStand 基础知识[6] Build-In StepTypes(1) 继续介绍: 还是先把Build-in StepTypes图片贴一下, 1. Call Executabl ...
- JMeter+Grafana+Influxdb搭建可视化性能测试监控平台（待继续完善。。。）
influxdb下载.安装.配置.启动 InfluxDB是一个当下比较流行的时序数据库,InfluxDB使用 Go 语言编写,无需外部依赖,安装配置非常方便,适合构建大型分布式系统的监控系统. 下载: ...
- Python3(十一) 原生爬虫
一.爬虫实例 1.原理:文本分析并提取信息——正则表达式. 2.实例目的:爬取熊猫TV某个分类下面主播的人气排行 分析网站结构 操作:F12查看HTML信息,Ctrl+Shift+C鼠标选取后找到对应 ...
- php面试笔记（4）-php基础知识-流程控制
本文是根据慕课网Jason老师的课程进行的PHP面试知识点总结和升华,如有侵权请联系我进行删除,email:guoyugygy@163.com 在面试中,考官往往喜欢基础扎实的面试者,而流程控制相关的 ...