首页 > 代码库 > Web页面上传功能

Web页面上传功能

2024-10-16 03:06:40   216人阅读

注：参考消保维权系统，登记页面上传功能
1、JSP页面：
<%@page import="com.wondersgroup.esf.base.util.ApplicationContextUtil"%>
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ include file="../../../common/taglib.jsp" %>
<script type="text/javascript">
    //替换所有
    String.prototype.replaceAll = function(s1, s2) {
        return this.replace(new RegExp(s1, "gm"), s2);
    };
    //截取上传附件路径后的名称
    function getFileName(id){
        var $file = $(id);
        var value=http://www.mamicode.com/$file.val();
        var index=value.lastIndexOf("\\")+1;
        var fileName=value.substring(index);
        type=".gif|.jpeg|.jpg|.png|.bmp|.txt|.doc|.docx|.xls|.xlsx|.zip|.rar|";
        if (checkAttachment(fileName, type)) {
            $file.prev().val(fileName);
        } else {
            $file.after($file.clone().val(""));
            $file.remove();
        }
    }
    function checkAttachment(obj, AllowExt) {
        var FileExt = obj.substr(obj.lastIndexOf(".")).toLowerCase();
        if (AllowExt != 0 && AllowExt.indexOf(FileExt + "|") == -1) { // 判断文件类型是否允许上传
            ErrMsg = "\n该文件类型不允许上传!请上传\n" + AllowExt + "类型的文件,\n当前文件类型为" + FileExt;
            alert(ErrMsg);
            return false;
        }
        return true;
    }
    //新增附件上传
    function funAddUpload() {
        var caseForm = document.getElementsByTagName("form");
        if (caseForm[0].id=="formCaseInfo") {
            alert("只能上传一个附件！");
        } else {
            var inquireRow = tbodyUpload.insertRow(tbodyUpload.rows.length);
            var investorCell = inquireRow.insertCell();
            var maxIndex = parseInt(tbodyUpload.getAttribute(‘maxIndex‘));
            var innerHTML = $("#templateUpUp").html();
            innerHTML = innerHTML.replaceAll("\\[0\\]", "[" + maxIndex + "]");
            innerHTML = innerHTML.replaceAll("_0", "_" + maxIndex);
            investorCell.innerHTML = innerHTML;
            inquireRow.setAttribute(‘index‘, maxIndex);
            tbodyUpload.setAttribute(‘maxIndex‘, maxIndex + 1);
            $(‘#fileName_‘ + maxIndex).val("");
            $(‘#myFiles_‘ + maxIndex).val("");
        }
    }
    //删除咨询信息
    function deleteUpload(obj) {
        if (tbodyUpload.rows.length > 1) {
            rowObj = getRowObj();
            if (rowObj.rowIndex == 1) {
                alert(‘第一行不能删除!‘);
                return;
            }
            if (confirm(‘确定‘ + obj.title + ‘?‘)) {
                rowObj.removeNode(true);
            }
        } else {
            alert(‘至少保留一条！‘);
        }
    }
    function getRowObj() {
        var eSrc = window.event.srcElement;
        event.returnValue = false;
        var i = 0;
        while (true) {
            if (eSrc.tagName.toUpperCase() == "TR") {
                if (i < 1) {
                    i++;
                } else {
                    return eSrc;
                    break;
                }
            }
            eSrc = eSrc.parentElement;
        }
    }
    function getRowIndex() {
        return getRowObj().getAttribute(‘index‘);
    }
</script>
            <table id="uploadTable" class="table_search">
                <thead>
                    <tr>
                        <th colspan="3" style="cursor: hand">
                            上传附件
                            <img align="absmiddle" src="<%=ApplicationContextUtil.getBasePath(request)%>images/add.png" style="cursor: pointer;" onclick="funAddUpload()" /> 
                        </th>
                    </tr>
                </thead>
                <tbody id="tbodyUpload" maxIndex=‘1‘>
                    <tr id="templateUpUp" index="0">
                        <td width="100%">
                            <table id="tabUp" border="0" cellpadding="5" cellspacing="0"  style="border-collapse: collapse;width: 99%;margin: 4px;">
                                <tr id="noTab">
                                    <th>请选择上传的文件:</th>
                                    <td>
                                        <form:hidden id="fileName_0" name="cnUploads[0].fileName"  /> 
                                        <input type="file" id="myFiles_0" name="myFiles"   onchange="getFileName(this)"  style="width:90%; height:18px; line-height:18px;"/>
                                    </td>
                                    <td style="width:15%">
                                           <IMG align="absmiddle" src="<%=ApplicationContextUtil.getBasePath(request)%>images/del.png" style="cursor: pointer" onclick="deleteUpload(this)" title="删除该条咨询信息" />
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </tbody>
            </table>
2、保存后，后台处理代码：（参考cnAppServiceImple）
            // 保存附件信息
            MultipartHttpServletRequest mRequest = (MultipartHttpServletRequest) form.getRequest();
            List<MultipartFile> myFiles = mRequest.getFiles("myFiles");
            for (MultipartFile multipartFile : myFiles) {
                if (StringUtils.isNotBlank(multipartFile.getOriginalFilename())) {
                    CnUpload cnUpload = new CnUpload();
                    cnUpload.setSerialNo(null);
                    cnUpload.setCaseId(caseId);
                    cnUpload.setFileName(multipartFile.getOriginalFilename());
                    cnUpload.setActId(BusinessConstants.FLOW_ID_CN_START);
                    cnUpload.setUploadDate(new Date());
                    cnUpload.setFilePath(path);
                    this.baseDao.persist(cnUpload);
                    FileUtils.copyInputStreamToFile(multipartFile.getInputStream(), new File(path, multipartFile.getOriginalFilename()));
                }
            }  


来自为知笔记(Wiz)


Web页面上传功能


联系
我们