zoukankan      html  css  js  c++  java
  • 推荐个通用的多图片上传插件 multiimage。

    其实是KindEditor 里面带的一个插件,multiimage,实用方法也非常简单。

    1。页面引用相应的样式表文件和js代码,中文语言包。

     <link rel="stylesheet" type="text/css" href=" @Url.Content("~/Scripts/KindEditor/themes/default/default.css")" />
       <script src="@Url.Content("~/Scripts/KindEditor/kindeditor.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/KindEditor/lang/zh_CN.js")" type="text/javascript"></script>
        <script language="javascript" type="text/javascript">
            $(document).ready(function () {
                
                KindEditor.ready(function (K) {  
    
                    var editor = K.editor({
                        uploadJson: '/Upload/UploadImage?SaveUrl=3', // 这里是上传文件的方法。如果不是用mvc开发的,请更换成相应的方法。
                        allowFileManager: true
    
                    });
                    K('#J_selectImage').click(function () {
                        editor.loadPlugin('multiimage', function () {
                            editor.plugin.multiImageDialog({
                                clickFn: function (urlList) {
                                    var div = K('#J_imageView');
                                    div.html('');
                                    var ccs = '';
                                    K.each(urlList, function (i, data) {
                                        //div.append('<img src="' + data.url + '">');
    
                                        ccs = ccs + data.url.substring(data.url.lastIndexOf("/") + 1) + ",";
                                    });
                                    editor.hideDialog();
                                    div.html("图片上传成功");
                                    $("#imgmuttle").val(ccs);//这里得到的是图片名字的一组数组。[1.jpg,2.jpg......]并存放到<input type="hidden" id="imgmuttle" />中
                                    
                                }
                            });
                        });
                    });
                });
    
            });
     </script>
    

      2.图片上传的方法。

     [HttpPost]
            public ActionResult UploadImage(int SaveUrl =1)
            {
                //string kks = Request["category_id"];
                string savePath = string.Empty;
                string saveUrl =string.Empty;
              
                switch (SaveUrl)
                { 
                   
                    case 3:
                        savePath = "/UpdateFiles/jingxs/"+DateTime.Now.ToString("yyyy-MM-dd")+"/";
                        saveUrl = "/UpdateFiles/" + DateTime.Now.ToString("yyyy-MM-dd") + "/";
                        break;
                    default:
                        savePath = "/UpdateFiles/";
                        saveUrl = "/UpdateFiles/";
                        break;
                }
              
                string fileTypes = "gif,jpg,jpeg,png,bmp";
                int maxSize = 1000000;
    
    
                Hashtable hash = new Hashtable();
               
                HttpPostedFileBase file = Request.Files["imgFile"];
                
                if (file == null)
                {
                    hash = new Hashtable();
                    hash["error"] = 0;
                    hash["url"] = "请选择文件";
                    return Json(hash);
                }
               
                string dirPath = Server.MapPath(savePath);
                if (!Directory.Exists(dirPath))
                {
                    Directory.CreateDirectory(dirPath); 
                }
               
                
                string fileName = file.FileName;
                string fileExt = Path.GetExtension(fileName).ToLower();
    
                ArrayList fileTypeList = ArrayList.Adapter(fileTypes.Split(','));
    
                if (file.InputStream == null || file.InputStream.Length > maxSize)
                {
                    hash = new Hashtable();
                    hash["error"] = 0;
                    hash["url"] = "上传文件大小超过限制";
                    return Json(hash);
                }
    
                if (string.IsNullOrEmpty(fileExt) || Array.IndexOf(fileTypes.Split(','), fileExt.Substring(1).ToLower()) == -1)
                {
                    hash = new Hashtable();
                    hash["error"] = 0;
                    hash["url"] = "上传文件扩展名是不允许的扩展名";
                    return Json(hash);
                }
                string fileUrl="";
                if (SaveUrl == 0)
                {
                       string newFileName = DateTime.Now.ToString("yyyyMMddHHmmss_ffff", DateTimeFormatInfo.InvariantInfo) + fileExt;
                     string filePath = dirPath +"tmep/"+ newFileName;
                     file.SaveAs(filePath);               
                    fileUrl = saveUrl + Command.command.addWaterMark(filePath, fileExt, dirPath);              
                }
                 else
                 {
                string newFileName = DateTime.Now.ToString("yyyyMMddHHmmss_ffff", DateTimeFormatInfo.InvariantInfo) + fileExt;
                string filePath = dirPath + newFileName;
                    file.SaveAs(filePath);
                  fileUrl = saveUrl + newFileName;
    
                 }
                hash = new Hashtable();
                hash["error"] = 0;
                hash["url"] = fileUrl;
    
                return Json(hash, "text/html;charset=UTF-8"); ;
            }
    

      这样就可以简单的实现了。本博客只注重功能的可用性。至于理论。以后会慢慢加深。

  • 相关阅读:
    Packet for query is too large (1986748 > 1048576). You can change this value on the server by 异常
    解决springdatajpa插入大量数据速度慢的问题
    thymeleaf onclick方法向js方法传递参数
    git的使用(扫盲)
    【错误总结】Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.
    SpringBoot集成Swagger(Swagger的使用),生成接口文档,方便前后端分离开发
    spring中后台接收参数总结
    PTA 03-树3 Tree Traversals Again (25分)
    PTA 03-树2 List Leaves (25分)
    PTA 03-树1 树的同构 (25分)
  • 原文地址:https://www.cnblogs.com/Playfunny/p/2746722.html
Copyright © 2011-2022 走看看