七牛云:ckeditor JS SDK 结合 C#实现多图片上传。
成功了,搞了2天。分享一下经验。
首先是把官方的那个例子下载下来,然后照如下的方式修改。
其中tempValue是一个全局变量。
function savetoqiniu() {
var uploader = Qiniu.uploader({
runtimes: "html5,flash,html4",
browse_button: "setfile",
save_key:false,
//uptoken: qiniu_uptoken,
get_new_uptoken: true,
uptoken_func:function()
{
tempValue=GetFileInfo();
var res = $.ajax({
type: "get",
data: {
key: tempValue
},
url: "/goods/CkeditorGetUploadToken/",
async: false
});
return JSON.parse(res.responseText).uptoken;
},
//uptoken_url: "/goods/CkeditorGetUploadToken?key=" + tempValue,
domain: qiniu_bucket_domain,
container: "container",
max_file_size: "6mb",
filters: {
mime_types: [{
title: "Image files",
extensions: "jpeg,jpg,gif,png,wbmp"
}]
},
flash_swf_url: "./Moxie.swf",
max_retries: 3,
dragdrop: true,
drop_element: "container",
chunk_size: "4mb",
auto_start: false,
init: {
"PostInit": function() {
document.getElementById("uploadfile").onclick = function() {
//document.getElementById("setfile").style.display = "none";
uploader.start();
return false
}
},
"FilesAdded": function(up, files) {
plupload.each(files,
function(file) {
document.getElementById("fileinfo").innerHTML += '<div id="' + file.id + '">' + file.name + " (" + plupload.formatSize(file.size) + ") <b></b> <i></i></div><br>";
//var key = Math.round(new Date().getTime() / 1000) + "_" + file.name;
//keyQiniuUpload = key;
//Test2();
})
},
"BeforeUpload": function (up, file) {
},
"UploadProgress": function(up, file) {
document.getElementById(file.id).getElementsByTagName("b")[0].innerHTML = "<span>" + file.percent + "%</span>"
},
"FileUploaded": function(up, file, info) {
var res = JSON.parse(info);
var sourceLink = qiniu_bucket_domain + "/" + res.key;
document.getElementById(file.id).getElementsByTagName("i")[0].innerHTML = sourceLink;
window.CKEDITOR.tools.callFunction(1, sourceLink, 'ok');
},
"Error": function(up, err, errTip) {},
"UploadComplete": function() {},
"Key": function(up, file) {
var key = tempValue;
console.log(up);
return key;
}
}
});
}
另外注意一点,就是KEY要传到后台去的,每次的KEY不同。下面是C#代码。
/// <summary>
/// 获得CKEDITOR上传凭证
/// </summary>
/// <returns></returns>
public ActionResult CkeditorGetUploadToken(string key)
{
string s= UploadUtil.GetUploadToken("kmsfan",key); if (!string.IsNullOrEmpty(s))
{
token token1 = new token();
token1.uptoken = s;
s = JsonConvert.SerializeObject(token1);
//HttpContext.Response.ContentType = "text/plain";
return Content(s);
//return Json(new { uptoken = s});
}
return Json(new { IsSuccess = false });
}
网上还没找到类似的解法,我这人不太善于表达,如果有需要的话,不懂的,请在底下留言。
七牛云:ckeditor JS SDK 结合 C#实现多图片上传。的更多相关文章
- JS兼容各个浏览器的本地图片上传即时预览效果
JS兼容各个浏览器的本地图片上传即时预览效果 很早以前 在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...
- ckeditor如何能实现直接粘贴把图片上传到服务器中?
在之前在工作中遇到在富文本编辑器中粘贴图片不能展示的问题,于是各种网上扒拉,终于找到解决方案,在这里感谢一下知乎中众大神以及TheViper. 通过知乎提供的思路找到粘贴的原理,通过TheViper找 ...
- JS兼容各个浏览器的本地图片上传即时预览效果\、
在firefox\chrome\ie10等浏览器中可以使用HTML5中的内容实现图片即时预览效果,在IE10以下浏览器中使用滤镜来解决图片显示问题. HTML5中的FileReader对象主要是把文件 ...
- ckeditor富文本编辑器的使用和图片上传,复制粘贴图片上传
自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了.一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器) ...
- PHP ckeditor富文本编辑器 结合ckfinder实现图片上传功能
一:前端页面代码 <script src="/www/res/ckeditor/ckeditor.js"></script> <textarea id ...
- 七牛云存储Python SDK使用教程 - 上传策略详解
文 七牛云存储Python SDK使用教程 - 上传策略详解 七牛云存储 python-sdk 七牛云存储教程 jemygraw 2015年01月04日发布 推荐 1 推荐 收藏 2 收藏,2.7k ...
- .net core CKEditor 图片上传
最近在玩 asp.net core,不想用UEditor,想使用CKEditor.故需要图片上传功能. 废话不多说,先上效果图: CKEditor 前端代码: <text id="co ...
- drupal中安装CKEditor文本编辑器,并配置图片上传功能
一.下载: 1.CKEditor模块 2.IMCE模块 二.安装 1.复制: 下载完上面两个模块之后,解压,将解压后整个文件夹,复制粘贴,放到 sites\all\modules下面,个人 ...
- 图片上传JS插件梳理与学习
项目的oper端和seller端,用了两个不同插件,简单了解一下: 一.seller端:AjaxUpload.js seller端使用的是 AjaxUpload.js ,封装好的一个库.调用时传入参数 ...
随机推荐
- Javascript 的执行环境(execution context)和作用域(scope)及垃圾回收
执行环境有全局执行环境和函数执行环境之分,每次进入一个新执行环境,都会创建一个搜索变量和函数的作用域链.函数的局部环境不仅有权访问函数作用于中的变量,而且可以访问其外部环境,直到全局环境.全局执行环境 ...
- 使用Python保存屏幕截图(不使用PIL)
起因 在极客学院讲授<使用Python编写远程控制程序>的课程中,涉及到查看被控制电脑屏幕截图的功能. 如果使用PIL,这个需求只需要三行代码: from PIL import Image ...
- 学习AOP之认识一下Spring AOP
心碎之事 要说知道AOP这个词倒是很久很久以前了,但是直到今天我也不敢说非常的理解它,其中的各种概念即抽象又太拗口. 在几次面试中都被问及AOP,但是真的没有答上来,或者都在面上,这给面试官的感觉就是 ...
- MVVM设计模式和WPF中的实现(四)事件绑定
MVVM设计模式和在WPF中的实现(四) 事件绑定 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在WPF中 ...
- redux学习
redux学习: 1.应用只有一个store,用于保存整个应用的所有的状态数据信息,即state,一个state对应一个页面的所需信息 注意:他只负责保存state,接收action, 从store. ...
- android 两种实现计时器时分秒的实现,把时间放在你的手中~
可能我们在开发中会时常用到计时器这玩意儿,比如在录像的时候,我们可能需要在右上角显示一个计时器.这个东西其实实现起来非常简单. 只需要用一个控件Chronometer,是的,就这么简单,我都不好意思讲 ...
- Spring之初体验
Spring之初体验 Spring是一个轻量级的Java Web开发框架,以IoC(Inverse of Control 控制反转)和 ...
- 【HTML】Html页面跳转的5种方式
目录结构: // contents structure [-] html实现 javascript方式实现 结合了倒数的javascript实现(IE) 解决Firefox不支持innerText的问 ...
- 微信小程序服务范围重大更新
12.29日,小程序服务范围做了重大更新,增对富媒体和工具类型的小程序,增加了很多细分领域 富媒体:增加资讯,FM电台,有声读物等,媒体平台可上小程序了 工具:信息查询,网络代理,健康,企业管理等 , ...
- Android开发学习—— Broadcast广播接收者
现实中:电台要发布消息,通过广播把消息广播出去,使用收音机,就可以收听广播,得知这条消息.Android中:系统在运行过程中,会产生许多事件,那么某些事件产生时,比如:电量改变.收发短信.拨打电话.屏 ...