成功了,搞了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#实现多图片上传。的更多相关文章

  1. JS兼容各个浏览器的本地图片上传即时预览效果

    JS兼容各个浏览器的本地图片上传即时预览效果 很早以前 在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...

  2. ckeditor如何能实现直接粘贴把图片上传到服务器中?

    在之前在工作中遇到在富文本编辑器中粘贴图片不能展示的问题,于是各种网上扒拉,终于找到解决方案,在这里感谢一下知乎中众大神以及TheViper. 通过知乎提供的思路找到粘贴的原理,通过TheViper找 ...

  3. JS兼容各个浏览器的本地图片上传即时预览效果\、

    在firefox\chrome\ie10等浏览器中可以使用HTML5中的内容实现图片即时预览效果,在IE10以下浏览器中使用滤镜来解决图片显示问题. HTML5中的FileReader对象主要是把文件 ...

  4. ckeditor富文本编辑器的使用和图片上传,复制粘贴图片上传

    自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了.一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器) ...

  5. PHP ckeditor富文本编辑器 结合ckfinder实现图片上传功能

    一:前端页面代码 <script src="/www/res/ckeditor/ckeditor.js"></script> <textarea id ...

  6. 七牛云存储Python SDK使用教程 - 上传策略详解

    文 七牛云存储Python SDK使用教程 - 上传策略详解 七牛云存储 python-sdk 七牛云存储教程 jemygraw 2015年01月04日发布 推荐 1 推荐 收藏 2 收藏,2.7k  ...

  7. .net core CKEditor 图片上传

    最近在玩 asp.net core,不想用UEditor,想使用CKEditor.故需要图片上传功能. 废话不多说,先上效果图: CKEditor 前端代码: <text id="co ...

  8. drupal中安装CKEditor文本编辑器,并配置图片上传功能

    一.下载: 1.CKEditor模块 2.IMCE模块 二.安装       1.复制: 下载完上面两个模块之后,解压,将解压后整个文件夹,复制粘贴,放到 sites\all\modules下面,个人 ...

  9. 图片上传JS插件梳理与学习

    项目的oper端和seller端,用了两个不同插件,简单了解一下: 一.seller端:AjaxUpload.js seller端使用的是 AjaxUpload.js ,封装好的一个库.调用时传入参数 ...

随机推荐

  1. 闰秒导致MySQL服务器的CPU sys过高

    今天,有个哥们碰到一个问题,他有一个从库,只要是启动MySQL,CPU使用率就非常高,其中sys占比也比较高,具体可见下图. 注意:他的生产环境是物理机,单个CPU,4个Core. 于是,他抓取了CP ...

  2. Gradle配置APK自动签名完整流程

    转载请注明出处:http://www.cnblogs.com/LT5505/p/6256683.html 一.生成签名 1.命令行生成签名,输入命令keytool -genkey -v -keysto ...

  3. 用scikit-learn学习BIRCH聚类

    在BIRCH聚类算法原理中,我们对BIRCH聚类算法的原理做了总结,本文就对scikit-learn中BIRCH算法的使用做一个总结. 1. scikit-learn之BIRCH类 在scikit-l ...

  4. iOS开发之多种Cell高度自适应实现方案的UI流畅度分析

    本篇博客的主题是关于UI操作流畅度优化的一篇博客,我们以TableView中填充多个根据内容自适应高度的Cell来作为本篇博客的使用场景.当然Cell高度的自适应网上的解决方案是铺天盖地呢,今天我们的 ...

  5. Javascript实用方法二

    承接上一篇, Object keys object的keys方法能够获取一个给定对象的所有键(key/属性名)并以数组的形式返回.这个方法可以用于键的筛选.匹配等. var basket = { st ...

  6. 封装集合(Encapsulate Collection)

    封装就是将相关的方法或者属性抽象成为一个对象. 封装的意义: 对外隐藏内部实现,接口不变,内部实现自由修改. 只返回需要的数据和方法. 提供一种方式防止数据被修改. 更好的代码复用. 当一个类的属性类 ...

  7. Canvas讲解

    1.Canvas是什么? 简单地说canvas是画布,可以进行画任何的线.图形.填充等一系列的操作,而且操作的画图就是js, 提供简单的二维矢量绘图. 2.步骤: <canvas id=&quo ...

  8. jquery实现下拉框多选

    一.说明 本文是利用EasyUI实现下拉框多选功能,在ComboxTree其原有的基础上对样式进行了改进,样式表已上传demo,代码如下 二.代码 <!DOCTYPE html PUBLIC & ...

  9. linux-centos6.5之ssh配置

    查询\安装SSH服务 #rpm -qa |grep ssh 检查是否装了SSH包 #yum install openssh-server 没有的话,安装SSH服务 #chkconfig --list ...

  10. 无限分级和tree结构数据增删改【提供Demo下载】

    无限分级 很多时候我们不确定等级关系的层级,这个时候就需要用到无限分级了. 说到无限分级,又要扯到递归调用了.(据说频繁递归是很耗性能的),在此我们需要先设计好表机构,用来存储无限分级的数据.当然,以 ...