C# Uploadify 文件上传组件的使用

一、页面的构建

1、要引用的JS和CSS

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

2、页面上的div容器，这里我是作为表格的一行

 <tr id="attachment">
            <td>上传附件：</td>
                    <td style="text-align: left">
                <div id='fileDiv'>
                    </div>
                    <div class='uploadifyDiv'>
                        <div id="fileQueue">
                        </div>
                        <input type="file" name="uploadify" id="uploadify" />
                        <span class="inputMesg">考察和培训必须上传备案表</span>
                    </div>
                          </td>
        </tr>

3、在js的入口初始化这个组件

$(function () {
            initUploadify("uploadify", "fileQueue");
        });
function initUploadify(id, queryId) {
            $("#" + id).uploadify({
                'uploader': '../js/uploadify.swf',
                'script': '../UploadHandler.ashx',
                'cancelImg': '../images/cancel.png',
                'folder': planUrl + new Date().getFullYear().toString(),
                'queueID': queryId,
                'auto': true,
                'multi': false,
                'buttonText': escape('select....'),
                'buttonImg': '../images/upload.png',
                'wmode': 'transparent',
                'fileSizeLimit': 2048,
                'removeCompleted': false,
                'onUploadError': function (event, queueID, fileObj) {
                    alert("文件:" + fileObj.name + "上传失败");
                },
                'onComplete': function (event, queueID, fileObj, response, data) {

                    //上传成功执行
                    if (response != "") {
                        $("#<%=hfFiles.ClientID %>").val(response);
                        //ShowFiles($j("#fileDiv2"), queueID, eaUrl + new Date().getFullYear().toString());
                    }
                }
            });
        }

4、显示已上传的文件，并给每个文件增加删除操作

function ShowFiles(div, files, dir, id) {
            //eaUrl = ".." + eaUrl.substring(1);
            var html;
            var year = dir;
            var path = planUrl + dir;
            html ='<table style="border: 1px; text-align:left; width: 95%; height: 10%; ">';
            html += '<tr style="border: solid 1px #e8eef4;  background-color:#def2fb"><td style ="width:200px;">文件名</td><td  style ="width:80px;">操作</td></tr >';
            var fileArry = files.split('|');
            for (var i = 0; i < fileArry.length; i++) {
                if (fileArry[i] == "")
                    continue;
                var filename = fileArry[i];
                html += '<tr><td><a style="white-space:nowrap;"  href="' + encodeURI(path + '/' + fileArry[i]) + '" target="_blank" >' + fileArry[i] + '</a></td> <td><a href="#" target="_self" id="file_' + i + '"> 删除</a></td></tr>';
                
                
            }
            html += '</table>';
            div.html(html);
            for (var i = 0; i < fileArry.length; i++) {
                if (fileArry[i] == "")
                    continue;
                var filename = fileArry[i];
                var fileId = i;
                $j("#file_" + fileId).click(function () {
                    deleteFile(id, filename, path, div[0].id);
                });
            }

        }

5、删除文件

 function deleteFile(id, fileName, dir, divId) {
            
            var rep = confirm("您确定要删除(" + fileName.substr(19, fileName.length - 19) + ")文件吗？");
            if (rep) {
                var deleteFile =OilDigital.CGGL.Web.PlanProcess.DeletePlanPersonFile(id, fileName, dir);
                if (deleteFile.error != null) {
                    alert(deleteFile.error.Message);
                    return;
                }
                <%--                $j("#<%=hfFiles.ClientID %>").val("");
                $j("#" + divId + "").html("");
                ShowFiles($j("#" + divId + ""), files.value, dir, id);--%>
                $j("#<%=hfFiles.ClientID %>").val("");
                $j(".uploadifyDiv").show();
                $j("#fileDiv").hide();
            }
        }

 注意：以上的过程我在实施过程中遇到几个问题

1、删除文件的方法无法调用，循环增加的click方法无效，试试下面这样增加click方法吧

html += '<tr><td><a style="white-space:nowrap;"  href="' + encodeURI(path + '/' + fileArry[i]) + '" target="_blank" >' + fileArry[i] + '</a></td> <td><a href="#" target="_self" id="file_' + i + '" onclick="deleteFile(\'' + id + '\',\'' + filename + '\',\'' + path + '\',\'' + div[0].id + '\')"> 删除</a></td></tr>';

2、如果这个上传控件是在模态窗口中打开的那上传路径'script': '../UploadHandler.ashx'是有问题的，我建议不用模态窗口，用window.open或者是jquery的对话窗