CFUpload图片批量上传整合成功

用户登录新用户注册

主题: CFUpload图片批量上传整合成功

作者: 一页白纸, 发布日期: 2012-04-01 11:24:14, 浏览数: 10756

本人采用的是自定义功能的方式整合了批量上传的功能，灵活使用方便。

新增了一个按钮叫批量上传

打开的界面:

然后选择文件：

选择完成后进行上传：

最后点击确定加载到编辑器的最后：

至此所以的功能介绍完毕了。

具体方法：

1：上传cfu的文件我是房子根目录下的

2：修改update.aspx文件的cs文件

注意这个

SaveImages("UploadFiles/");

 if (Request.Files["Filedata"] != null)//判断是否有文件上传上来
        {
            SaveImages("UploadFiles/");
            //其他表单数据接收

            if (Request.QueryString["access2008_File_md5"] != null)
            {
                Response.Write("<br/>");
                Response.Write("MD5效验" + Request.QueryString["access2008_File_md5"]);
            }
            //Response.Write("<br/>");
            if (Request.Form["select"] != null || Request.Form["select2"] != null)
            {
                Response.Write("你选择的是<font color='#ff0000'>" + Request.Form["select"] + "</font>--<font color='#0000ff'>" + Request.Form["select2"] + "</font>");
            }
            Response.End();
        }

然后我修改了文件的上传部分，这个根据您的需要自己修改：

 private void SaveImages(string url)
    {
        ///'遍历File表单元素
        HttpFileCollection files = HttpContext.Current.Request.Files;

        ///'检查文件扩展名字
        //HttpPostedFile postedFile = files[iFile];
        HttpPostedFile postedFile = Request.Files["Filedata"]; //得到要上传文件
        string fileName, fileExtension, filesize, aspxUrl = "", new_filename = "";
        fileName = System.IO.Path.GetFileName(postedFile.FileName.ToString()); //得到文件名
        filesize = System.IO.Path.GetFileName(postedFile.ContentLength.ToString()); //得到文件大小
        if (fileName != "")
        {
            aspxUrl = Request.Path.Substring(0, Request.Path.LastIndexOf("/"));
            aspxUrl = aspxUrl.Substring(0, aspxUrl.LastIndexOf("/") + 1) + url + "image/" + DateTime.Now.ToString("yyyyMMdd", DateTimeFormatInfo.InvariantInfo) + "/";

            String dirPath = System.Web.HttpContext.Current.Server.MapPath("../"+url) + "image/";
            String newDirPath = dirPath + DateTime.Now.ToString("yyyyMMdd", DateTimeFormatInfo.InvariantInfo) + "/";
            if (!Directory.Exists(dirPath))
            {
                Directory.CreateDirectory(dirPath);
            }
            if (!Directory.Exists(newDirPath))
            {
                Directory.CreateDirectory(newDirPath);
            }
            fileExtension = System.IO.Path.GetExtension(fileName);//获取扩展名
            new_filename = DateTime.Now.ToString("yyyyMMddHHmmss_ffff", DateTimeFormatInfo.InvariantInfo) + fileExtension;
            //注意：可能要修改你的文件夹的匿名写入权限。
            postedFile.SaveAs(newDirPath + new_filename);

        }
        Response.Write("<p align='center'><img src='" + aspxUrl + new_filename + "' /></p>");
        //Response.Write(fileName + "上传成功");
    }

3：初始化js：

首先我将部分公用js放到一个js文件中

function challs_flash_onComplete(a)
function challs_flash_onCompleteData(a)
function challs_flash_onStart(a)
function challs_flash_onCompleteAll(a) 
function challs_flash_onSelectFile(a)
function challs_flash_deleteAllFiles()
function challs_flash_onError(a) 
function challs_flash_FormData(a)
function challs_flash_style()
var isMSIE = (navigator.appName == "Microsoft Internet Explorer");
function thisMovie(movieName)

4：修改js的参数设置，您也可以自己修改

function challs_flash_onComplete(a) { //每次上传完成调用的函数，并传入一个Object类型变量，包括刚上传文件的大小，名称，上传所用时间,文件类型
    var name = a.fileName; //获取上传文件名
    var size = a.fileSize; //获取上传文件大小，单位字节
    var time = a.updateTime; //获取上传所用时间 单位毫秒
    var type = a.fileType; //获取文件类型，在 Windows 上，此属性是文件扩展名。 在 Macintosh 上，此属性是由四个字符组成的文件类型
    //document.getElementById('show').innerHTML+=name+' --- '+size+'字节 ----文件类型：'+type+'--- 用时 '+(time/1000)+'秒<br><br>'
}

function challs_flash_onCompleteData(a) { //获取服务器反馈信息事件
    //document.getElementById('show').innerHTML += '<font color="#ff0000">服务器端反馈信息：</font><br />';
    document.getElementById('show').innerHTML += a;
}
function challs_flash_onStart(a) { //开始一个新的文件上传时事件,并传入一个Object类型变量，包括刚上传文件的大小，名称，类型
    var name = a.fileName; //获取上传文件名
    var size = a.fileSize; //获取上传文件大小，单位字节
    var type = a.fileType; //获取文件类型，在 Windows 上，此属性是文件扩展名。 在 Macintosh 上，此属性是由四个字符组成的文件类型
    //document.getElementById('show').innerHTML+=name+'开始上传！<br />';

    return true; //返回 false 时，组件将会停止上传
}

function challs_flash_onCompleteAll(a) { //上传文件列表全部上传完毕事件,参数 a 数值类型，返回上传失败的数量
    //document.getElementById('show').innerHTML+='<font color="#ff0000">所有文件上传完毕，</font>上传失败'+a+'个！<br />';
    //window.location.href='http://www.access2008.cn/update'; //传输完成后，跳转页面
}

function challs_flash_onSelectFile(a) { //用户选择文件完毕触发事件，参数 a 数值类型，返回等待上传文件数量
    //document.getElementById('show').innerHTML+='<font color="#ff0000">文件选择完成：</font>等待上传文件'+a+'个！<br />';
}

5：页面初始化cfu，在要使用cfu的页面添加一下初始化js，这个是我的设置，您也可以按照需求自己设置

a.url = "../pl_updalode/update.aspx";

这个路径最重要，要是把这个设置的不对就不能上传

function challs_flash_update() { //Flash 初始化函数
            var a = {};
            //定义变量为Object 类型

            a.title = "上传文件"; //设置组件头部名称

            a.FormName = "Filedata";
            //设置Form表单的文本域的Name属性

            a.url = "../pl_updalode/update.aspx";
            //设置服务器接收代码文件

            a.parameter = "bs=tyi&id=50";
            //设置提交参数，以GET形式提交

            a.typefile = ["Images (*.gif,*.png,*.jpg,*jpeg)", "*.gif;*.png;*.jpg;*.jpeg;", "GIF (*.gif)", "*.gif;", "PNG (*.png)", "*.png;", "JPEG (*.jpg,*.jpeg)", "*.jpg;*.jpeg;"];
            //设置可以上传文件 数组类型
            //"Images (*.gif,*.png,*.jpg)"为用户选择要上载的文件时可以看到的描述字符串,
            //"*.gif;*.png;*.jpg"为文件扩展名列表，其中列出用户选择要上载的文件时可以看到的 Windows 文件格式，以分号相隔
            //2个为一组，可以设置多组文件类型

            a.UpSize = 1;
            //可限制传输文件总容量，0或负数为不限制，单位MB

            a.fileNum = 0;
            //可限制待传文件的数量，0或负数为不限制

            a.size = 1;
            //上传单个文件限制大小，单位MB，可以填写小数类型

            //a.FormID = ['select', 'select2'];
            //设置每次上传时将注册了ID的表单数据以POST形式发送到服务器
            //需要设置的FORM表单中checkbox,text,textarea,radio,select项目的ID值,radio组只需要一个设置ID即可
            //参数为数组类型，注意使用此参数必须有 challs_flash_FormData() 函数支持

            a.autoClose = -1;
            //上传完成条目，将自动删除已完成的条目，值为延迟时间，以秒为单位，当值为 -1 时不会自动关闭，注意：当参数CompleteClose为false时无效

            a.CompleteClose = true;
            //设置为true时，上传完成的条目，将也可以取消删除条目，这样参数 UpSize 将失效, 默认为false

            a.repeatFile = true;
            //设置为true时，可以过滤用户已经选择的重复文件，否则可以让用户多次选择上传同一个文件，默认为false

            a.returnServer = true;
            //设置为true时，组件必须等到服务器有反馈值了才会进行下一个步骤，否则不会等待服务器返回值，直接进行下一步骤，默认为false

            a.MD5File = 0;
            //设置MD5文件签名模式，参数如下 ,注意：FLASH无法计算超过100M的文件,在无特殊需要时，请设置为0
            //0为关闭MD5计算签名
            //1为直接计算MD5签名后上传
            //2为计算签名，将签名提交服务器验证，在根据服务器反馈来执行上传或不上传
            //3为先提交文件基本信息，根据服务器反馈，执行MD5签名计算或直接上传，如果是要进行MD5计算，计算后，提交计算结果，在根据服务器反馈，来执行是否上传或不上传

            a.loadFileOrder = true;
            //选择的文件加载文件列表顺序，TRUE = 正序加载，FALSE = 倒序加载

            a.mixFileNum = 0;
            //至少选择的文件数量，设置这个将限制文件列表最少正常数量（包括等待上传和已经上传）为设置的数量，才能点击上传，0为不限制

            a.ListShowType = 1;
            //文件列表显示类型：1 = 传统列表显示，2 = 缩略图列表显示（适用于图片专用上传）

            a.InfoDownRight = "等待上传：%1%个  已上传：%2%个";
            //右下角统计信息的文本设置,文本中的 %1% = 等待上传数量的替换符号，%2% = 已经上传数量的替换符号

            a.TitleSwitch = true;
            //是否显示组件头部

            a.ForceFileNum = 0;
            //强制条目数量，已上传和待上传条目相加等于为设置的值（不包括上传失败的条目），否则不让上传, 0为不限制，设置限制后mixFileNum,autoClose和fileNum属性将无效！

            a.autoUpload = false;
            //设置为true时，用户选择文件后，直接开始上传，无需点击上传，默认为false;

            a.adjustOrder = true;
            //设置为true时，用户可以拖动列表，重新排列位置

            a.deleteAllShow = true;
            //设置是否显示，全部清除按钮

            return a;
            //返回Object
        }

6，调用插件：

.ke-icon-all_img
        {
            background-image: url("../kd_4/themes/default/all_img.png");
            width: 16px;
            height: 16px;
        }

//批量图片上传对kindedit对接部分
        KindEditor.lang({
            all_img: '批量图片上传'
        });
        KindEditor.plugin('all_img', function (K) {
            var self = this, name = 'all_img';
            self.clickToolbar(name, function () {

                var dialog = K.dialog({
                    width: 500,
                    title: '批量图片上传',
                    body: '<div><div id="show" style=" display:none;"> </div><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="500" height="320" id="update" align="middle" style="padding:10px;"><param name="allowFullScreen" value="false" /><param name="allowScriptAccess" value="always" /><param name="movie" value="../pl_updalode/update.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /><embed src="../pl_updalode/update.swf" quality="high" bgcolor="#ffffff" width="480" height="320" name="update" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></object></div> ',
                    closeBtn: {
                        name: '关闭',
                        click: function (e) {
                            dialog.remove();
                        }
                    },
                    yesBtn: {
                        name: '确定',
                        click: function (e) {
                            if (K('#show').html() == "") {
                                alert("您还没有上传文件！");
                            } else {
                                self.appendHtml(K('#show').html());
                                dialog.remove();
                            }
                        }
                    },
                    noBtn: {
                        name: '取消',
                        click: function (e) {
                            dialog.remove();
                        }
                    }
                });

            });
        });

这个这个掉用注意一个地方：

body部分主要这个swf的路径，根据不同页面的路径添切换

<param name="movie" value="../pl_updalode/update.swf" />

<embed src="../pl_updalode/update.swf" quality="high" bgcolor="#ffffff" width="480" height="320" name="update" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />

这里设置swf的大小和路径等等

到此正就ok了！

我采用的方法比较笨！有需要的可以照做做做，高手可以改进！！！！

不喜欢的不要拍砖……

作者: 小浪子, 发布日期: 2012-04-01 15:04:37

值得鼓励。不过整合到里面不是很好看。

还是等4.1发布。看老大使用swfupload整合的了。呵呵。反正下版就是：4.1。。期待中。

作者: 一页白纸, 发布日期: 2012-04-01 15:31:43

回复小浪子：

谢谢！最好期待他快点发布啊！这也是么办法啊！只能先凑活用用了！

作者: 哈哈大侠, 发布日期: 2012-04-06 22:24:15

不错哈，不过这个是.net版本的，有没有.php和.asp的呢

作者: 幻想, 发布日期: 2012-04-12 12:26:09

支持.NET

作者: 张明, 发布日期: 2012-05-05 01:03:11

非常感谢分享，本地图片预览，这个好使，估计只有flash才能做到了。

作者: 这蛋疼的名字, 发布日期: 2012-05-17 09:20:51

挺好的，我还试的整合来，没成功，这不等到4.1了。

论坛 Forum