Uploadify自定义顺序上传图片并修改名字

解决Uploadify上传图片之后自己没法按照需求把图片排序的问题。

分析：uploadify这个控件是按照选择的文件顺序进行上传的上传的时候我们又要改变的顺序我们可以创建两个集合来处理一个上传的集合arrayDiv 一个是操作的集合arraytable 每次处理之后动态改变查询

1：html界面部分用一个table作为表格来存放选择的文件名称

View Code

<body>
    <div id="fileQueue">
    </div>
    <table id="tablecontent">
        <tr>
            <td>
                编号
            </td>
            <td>
                文件名字
            </td>
            <td>
                操作
            </td>
            <td>
                移动
            </td>
        </tr>
    </table>
    <input type="file" name="uploadify" id="uploadify" />
    <p>

        <input id="Button2" type="button" value="上传" onclick="upload()" />
    </p>
</body>

2：控件正确使用需要引用js(Uploadify的下载就不说了,很多地方可以找到)

View Code

    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <link href="Scripts/uploadify/uploadify.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/uploadify/jquery.uploadify.v2.1.4.js" type="text/javascript"></script>
    <script src="Scripts/uploadify/jquery.uploadify.v2.1.4.min.js" type="text/javascript"></script>
    <script src="Scripts/uploadify/swfobject.js" type="text/javascript"></script>

3:让Uploadify生效，每次选择图片往table中添加数据

View Code

    $(function () {


            $("#uploadify").uploadify({
                'uploader': 'Scripts/uploadify/uploadify.swf',
                'script': 'UploadHandler.ashx',
                'cancelImg': 'Scripts/uploadify/cancel.png',
                'folder': 'UploadFile',
                'queueID': 'fileQueue',
                'fileExt': '*.jpg;*.jpeg;*.png;*.gif',
                'fileDesc': '图片(jpg,jpeg,png,gif)',
                'auto': false,
                'multi': true,
                'scriptData': { NewfileName: 0 },
                'onSelect': function (e, queueId, fileObj) {
                    var trhtml = "<tr id=" + queueId + "><td>" + queueId + "</td><td>"
                     + fileObj.name + "</td><td><a href='javascript:removetr(\"" + queueId + "\")'>删除</a></td><td><a href='javascript:void(0)' onClick=" + 'moveUp(this)' + ">上移</a><a href='javascript:void(0)' onClick=" + 'moveDown(this)' + ">下移</a></td></tr>";
                    $("#tablecontent").append(trhtml);
                },
                'onComplete': function (e, queueId, fileObj, response, data) {
                    if (data.fileCount > 0) {
                        m++;
                        var tempDiv = arrayDiv[m];
                     for (var s = 0; s < arrayTable.length; s++) {
                         if (arrayTable[s] == tempDiv) {
                                $('#uploadify').uploadifySettings('scriptData', { 'NewfileName': s });
                            }

                        }
                    }


                }
            });
        });

4：表格操作事件(上移下移删除事件)

View Code

//删除图片
        function removetr(id) {
            $("#uploadify").uploadifyCancel(id);
            $("tr[id='" + id + "']").remove();
        }
        //上移
        function moveUp(obj) {
            var current = $(obj).parent().parent();
            var prev = current.prev();
            if (current.index() > 1) {
                current.insertBefore(prev);
            }
        }
        //下移
        function moveDown(obj) {
            var current = $(obj).parent().parent();
            var next = current.next();
            if (next) {
                current.insertAfter(next);
            }
        }

5：提交事件

View Code

    //全局的变量
            var m = 0;
        var arrayTable = new Array(); //操作table的集合 操作列表
        var arrayDiv = new Array(); //实现div的集合 要上传列表

 //上传的事件
        function upload() {
            for (var i = 1; i < $("#tablecontent tr").length; i++) { //获取table的行数 给数组赋值
                arrayTable.push($("#tablecontent tr:eq(" + i + ")").find("td:eq(0)").text());
            }
            for (var k = 0; k < $("#fileQueue").children().length; k++) {//给div集合赋值
                var temp = $("#fileQueue").children().eq(k).attr("id");
                arrayDiv.push(temp.substring(temp.length-6, temp.length));
            }


            var tempDiv = arrayDiv[m];
            //第一个值在table中集合的位置
            for (var s = 0; s < arrayTable.length; s++) {
            if (arrayTable[s] == tempDiv) {
                    $('#uploadify').uploadifySettings('scriptData', { 'NewfileName': s });
                }

            }

            $('#uploadify').uploadifyUpload();

        }

6：一般处理程序的后台

View Code

context.Response.ContentType = "text/plain";
            context.Response.Charset = "utf-8";
            HttpPostedFile     file = context.Request.Files["Filedata"]; //获取上传的单个文件
            string pictureId = context.Request["NewfileName"];  //上传文件将要重新命名的一部分
            string uploadPath = HttpContext.Current.Server.MapPath(context.Request["folder"]) + "\\";//上传文件将要存放的路径
            if (file != null)
            {
                if (!Directory.Exists(uploadPath))
                { //判断该文件夹是否存在 没有就创建
                    Directory.CreateDirectory(uploadPath);
                }
                string fileName = file.FileName;//获取上传文件的名称
                string fileExtension = Path.GetExtension(fileName);//获取文件的扩展名
                string fileNewName = "temp_" + pictureId;
                file.SaveAs(uploadPath + fileNewName + fileExtension);
                context.Response.Write("1");
            }
            else {
                context.Response.Write("0");
            }

7：很丑的效果图