七牛云: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 ,封装好的一个库.调用时传入参数 ...
随机推荐
- 采用MiniProfiler监控EF与.NET MVC项目(Entity Framework 延伸系列1)
前言 Entity Framework 延伸系列目录 今天来说说EF与MVC项目的性能检测和监控 首先,先介绍一下今天我们使用的工具吧. MiniProfiler~ 这个东西的介绍如下: MVC Mi ...
- Key/Value之王Memcached初探:二、Memcached在.Net中的基本操作
一.Memcached ClientLib For .Net 首先,不得不说,许多语言都实现了连接Memcached的客户端,其中以Perl.PHP为主. 仅仅memcached网站上列出的语言就有: ...
- js复杂对象和简单对象的简单转化
var course = { teacher :{ teacherId:001, teacherName:"王" }, course : { courseId : 120, cou ...
- jsp中出现onclick函数提示Cannot return from outside a function or method
在使用Myeclipse10部署完项目后,原先不出错的项目,会有红色的叉叉,JSP页面会提示onclick函数错误 Cannot return from outside a function or m ...
- VisualStudio2013 如何打开之前版本开发的(.vdproj )安装项目
当你的项目使用早于 visualstudio2013 的版本开发并且使用 Visual Studio Installer 制作安装项目时,在升级至 VS2013 后会发现新安装项目无法打开, VS20 ...
- iosselect:一个js picker项目,在H5中实现IOS的select下拉框效果
具体文档和demo可以访问github:https://github.com/zhoushengmufc/iosselect 移动端浏览器对于select的展示样式是不一致的,ios下是类似原生的pi ...
- [Android]使用Dagger 2进行依赖注入 - Producers(翻译)
以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/6234811.html 使用Dagger 2进行依赖注入 - P ...
- Hacker Rank: Two Strings - thinking in C# 15+ ways
March 18, 2016 Problem statement: https://www.hackerrank.com/challenges/two-strings/submissions/code ...
- 关于《Linux.NET学习手记(8)》的补充说明
早前的一两天<Linux.NET学习手记(8)>发布了,这一篇主要是讲述OWIN框架与OwinHost之间如何根据OWIN协议进行通信构成一套完整的系统.文中我们还直接学习如何直接操作OW ...
- ASP.NET 5 Beta 8 发布
ASP.NET 5 的路线图(详见 ASP.NET 5 Schedule and Roadmap : https://github.com/aspnet/home/wiki/roadmap ):Bet ...