多个附件上传(前台代码)

<%
String path = request.getContextPath();  
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
%>

<script type="text/javascript" src="<%=basePath%>/pages/js/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
function showFileName() {
    
    var lblFileName = '<label>'+getFileName($('#fileUpLoad').val())+'</label>';
    var hiddenValue ='value="'+ $('#fileUpLoad').val()+'""';
    var hiddenFilePath ='<input type="hidden"'+hiddenValue+' />';
    var btnDelete = '&nbsp;&nbsp;<input type="button" id="btnDel" value="删除" onclick="delFileName()">'
    var allControl;
    
    if ($('#divFileList').children().length>0) {
        var allControl = '<br/><div>'+lblFileName+hiddenFilePath+btnDelete+'</div>';
    }
    else {
        var allControl = '<div>'+lblFileName+hiddenFilePath+btnDelete+'</div>';
    }
    
    $('#divFileList').append($(allControl));
    
    $('#fileUpLoad').val('');
}

function getFileName(path){
    var pos1 = path.lastIndexOf('/');
    var pos2 = path.lastIndexOf('\\');
    var pos  = Math.max(pos1, pos2)
    if( pos<0 )
    return path;
    else
    return path.substring(pos+1);
}

function delFileName() {
    $('#btnDel').parent().remove();
}

<tr>
      <td>附件</td>
      <td>
        <input type="file" id="fileUpLoad" onchange="showFileName()" />
      </td>
    </tr>
    <tr>
      <td>附件列表</td>
      <td>
        <div id="divFileList"></div>
      </td>
    </tr>

posted @ 2014-03-17 16:23  fixbug11  阅读(259)  评论(0编辑  收藏  举报