zoukankan      html  css  js  c++  java
  • 七牛云: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 });
            }
    

      网上还没找到类似的解法,我这人不太善于表达,如果有需要的话,不懂的,请在底下留言。

  • 相关阅读:
    CSS3圆角详解
    纯CSS绘制三角形(各种角度)
    jquery实现文字上下无缝滚动
    选择select里面某个option触发的事件
    倒计时
    移动端弹出层加遮罩后禁止滑动
    终端连接oschina 生成SSH公钥
    兼容所有的浏览器透明度代码
    背景颜色渐变效果设置
    Linux下搜索文件命令whereis/which/find/locate
  • 原文地址:https://www.cnblogs.com/kmsfan/p/5861566.html
Copyright © 2011-2022 走看看