一、页面的构建
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 + '" οnclick="deleteFile(\'' + id + '\',\'' + filename + '\',\'' + path + '\',\'' + div[0].id + '\')"> 删除</a></td></tr>';
2、如果这个上传控件是在模态窗口中打开的那上传路径'script': '../UploadHandler.ashx'是有问题的,我建议不用模态窗口,用window.open或者是jquery的对话窗