Web页面上传功能

注:参考消保维权系统,登记页面上传功能

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=$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)

时间: 2024-10-26 06:24:30

Web页面上传功能的相关文章

如何在Web页面中集成文件上传功能

当前,个人主页制作非常流行.当用户开发好自己的页面时,需要将文件传输到服务器上,解决这个问题的方法之一 是运行FTP服务器并将每个用户的FTP默认目录设为用户的Web主目录,这样用户就能运行FTP客户程序并上传文件到指定的 Web目录.由于Windows NT 和 Windows98均不提供直接的基于窗口形式的FTP客户程序,用户必须懂得如何使用基于命令行 的FTP客户,或掌握一种新的基于窗口形式的FTP客户程序.因此,这种解决方案仅对熟悉FTP且富有经验的用户来说是可行 的. 如果我们能把文件

[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能

很久没有更新博客了,再不写点东西都烂了. 这次更新一个小内容,是两个插件的组合使用,实现头像上传功能. 业务需求: 头像上传功能,要对上传的文件进行剪切,且保证头像到服务器时必须是正方形的. 优化<input type="file">的显示样式,基础的样式实在太难看了. 上传的头像需要进行质量压缩跟大小裁剪,以减缓浏览器的压力. 成果预览: 使用到的技术插件 Jcrop:用于前端"裁剪"图片 bootstrap-fileinput:用于前端优化上传控件样

【Bootstrap-插件使用】Jcrop+fileinput组合实现头像上传功能

作者:Dreawer链接:https://zhuanlan.zhihu.com/p/24465742来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 作者:梦游的龙猫(转载已获得作者许可) 很久没有更新博客了,再不写点东西都烂了. 这次更新一个小内容,是两个插件的组合使用,实现头像上传功能. 业务需求: 头像上传功能,要对上传的文件进行剪切,且保证头像到服务器时必须是正方形的. 优化<input type="file">的显示样式,基础的样式实

移动端web头像上传实现截取和照片方向修复

实战所需js包: jQuery.Jcrop.EXIF 本次实战功能是在 app 中的 我的客户 的客户信息页面中实现移动端web的头像上传,本次没有实现图像拖拽.缩放的触摸事件功能(Jcrop在这方面的扩展支持实在不够良好,弄了半天没弄出来),若后续有更好的移动端web头像上传插件,可考虑后续替代升级. demo主要实现的关键功能: 图像的方向修正及图像截取 虽然没有实现图像拖拽和双指缩放,但其缩放后的相对于图像的比例计算和拖拽坐标计算规则是一致的,可以参考.同时图像的旋转功能也可参考其中的核心

(转)淘淘商城系列——实现图片上传功能

http://blog.csdn.net/yerenyuan_pku/article/details/72808000 上文我们使用FastDFS-Client进行了简单的文件上传操作测试,淘淘商城项目中添加商品时上传图片的功能还没实现,如下图所示.本文将花大量笔墨来教大家如何实现图片上传这个功能. 我们来看下item-add.jsp页面,可以看到上传图片触发的方法是通过叫做picFileUpload的class来处理的,在<a>标签的下方是一个隐藏域,是用来接收图片上传到图片服务器的回显地址

Struts2中实现多文件上传功能

上篇理了一下Struut 2实现文件上传功能的思路,下面接着来看一下多文件上传是如何实现的. 1. 多文件上传也是在单文件上传的基础上,稍微修改一下数据类型和实现方法,即可完成,思路都是大致相同的. 2. 仍然是使用上一篇的项目结构和代码,需要修改的只是UploadAction.java.upload.jsp这两个文件. 3. 修改后的UploadAction.java.upload.jsp这两个文件如下:  UploadAction.java package com.upload.action

web服务器上传文件过程

通过web服务器上传文件,需要提前准备好下面3步,然后才能通过第4步上传文件1.web服务器的配置 1.1 将代码src目录中的select.c文件的170行的REQUEST_TIMEOUT改为10*REQUEST_TIMEOUT 1.2 在buildroot中选中boa后保存编译,然后更新nfs_root中内容: 1.3 重启单板 1.4 配置/etc/boa/boa.conf文件 1.4.1 屏蔽掉Group nobody,增加Group 0 1.4.2 去掉Errorlog前的屏蔽 1.4

数据采集之Web端上传文件到Hadoop HDFS

前言 最近在公司接到一个任务,是关于数据采集方面的. 需求主要有3个: 通过web端上传文件到HDFS; 通过日志采集的方式导入到HDFS; 将数据库DB的表数据导入到HDFS. 正好最近都有在这方面做知识储备.正所谓养兵千日,用兵一时啊.学习到的东西只有应用到真实的环境中才有意义不是么. 环境 这里只做模拟环境,而不是真实的线上环境,所以也很简单,如果要使用的话还需要优化优化. OS Debian 8.7 Hadoop 2.6.5 SpringBoot 1.5.1.RELEASE 说明一下,这

struts2中实现文件上传功能

在web项目中,文件上传.头像上传这样的功能经常是要用到的,下面就以在struts2中实现文件上传功能为例子,简单地理一下文件上传功能的编码思路. 项目目录结构 项目源代码 web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:x