首页 > 代码库 > 七牛云:ckeditor JS SDK 结合 C#实现多图片上传。

七牛云: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=http://www.mamicode.com/GetFileInfo();"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#实现多图片上传。