day04附件上传同步和异步两种方式

最新推荐文章于 2023-03-30 11:07:57 发布

小杨与bug的斗争

最新推荐文章于 2023-03-30 11:07:57 发布

阅读量343

点赞数

分类专栏： OA项目实战

本文链接：https://blog.csdn.net/BeLoved_Code/article/details/105491659

版权

OA项目实战专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文章目录

- - 文件上传——同步
  - 文件上传——异步

文件上传——同步

前端要求：

encytype=“multipart/form-data”
method=“post”
input type=“file”

后端要求：

导入文件上传所需要的commons-fileupload和commons-io包
必须在springmvc的配置文件中配置多媒体解析器
controller层目标方法的参数必须是MultiPartFile类型的参数接收文件

注意：

后端接收数据的参数为一个实体类和一个多媒体类型参数（MultipartFile），实体接收的数据保存到数据库，多媒体类型用来保存上传的附件

前端页面

<%@ page language="java" pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>添加附件</title>
    <link rel="stylesheet" type="text/css" href="skin/css/base.css">
    <script type="text/javascript" src="static/js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" >
        $(function () {
            $.ajax({
                type:'get',
                url:'/pms/pro/list',
                success:function (msg) {
                    $(msg).each(function (index,item) {
                        $("#selectProject").append("<option value='"+item.pid+"'>"+item.pname+"</option>")
                    })
                }
            })
        })
        function commit() {
            $("form[name='form2']").submit();
        }
    </script>
</head>
<body leftmargin="8" topmargin="8" background='skin/images/allbg.gif'>

<!--  快速转换位置按钮  -->
<table width="98%" border="0" cellpadding="0" cellspacing="1" bgcolor="#D1DDAA" align="center">
    <tr>
        <td height="26" background="skin/images/newlinebg3.gif">
            <table width="58%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td>
                        当前位置:项目管理>>添加附件
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

<form name="form2" action="${pageContext.request.contextPath}/attachment/save" enctype="multipart/form-data" method="post">

    <table width="98%" border="0" cellpadding="2" cellspacing="1" bgcolor="#D1DDAA" align="center"
           style="margin-top:8px">
        <tr bgcolor="#E7E7E7">
            <td height="24" colspan="2" background="skin/images/tbg.gif">&nbsp;添加附件&nbsp;</td>
        </tr>
        <tr>
            <td align="right" bgcolor="#FAFAF1" height="22">选择项目：</td>
            <td align='left' bgcolor="#FFFFFF" onMouseMove="javascript:this.bgColor='#FCFDEE';"
                onMouseOut="javascript:this.bgColor='#FFFFFF';" height="22">
                <select id="selectProject" name="proFk">
                    <option>---请选择项目---</option>
                </select></td>
        </tr>
        <tr>
            <td align="right" bgcolor="#FAFAF1" height="22">附件名称：</td>
            <td align='left' bgcolor="#FFFFFF" onMouseMove="javascript:this.bgColor='#FCFDEE';"
                onMouseOut="javascript:this.bgColor='#FFFFFF';" height="22">
                <input size="26" name="attname"/></td>
        </tr>
        <tr>
            <td align="right" bgcolor="#FAFAF1" height="22">附件信息描述：</td>
            <td align='left' bgcolor="#FFFFFF" onMouseMove="javascript:this.bgColor='#FCFDEE';"
                onMouseOut="javascript:this.bgColor='#FFFFFF';" height="22">
                <input size="52" name="attdis"/></td>
        </tr>
        <tr>
            <td align="right" bgcolor="#FAFAF1" height="22">附件：</td>
            <td align='left' bgcolor="#FFFFFF" onMouseMove="javascript:this.bgColor='#FCFDEE';"
                onMouseOut="javascript:this.bgColor='#FFFFFF';" height="22">
                <input type="file" name="document"/>
            </td>
        </tr>


        <tr>
            <td align="right" bgcolor="#FAFAF1">备注：</td>
            <td colspan=3 align='left' bgcolor="#FFFFFF" onMouseMove="javascript:this.bgColor='#FCFDEE';"
                onMouseOut="javascript:this.bgColor='#FFFFFF';">
                <textarea rows=10 cols=130 name="remark"></textarea>
            </td>
        </tr>


        <tr bgcolor="#FAFAF1">
            <td height="28" colspan=4 align=center>
                &nbsp;
                <a href="javascript:commit()" class="coolbg">保存</a>
                <a href="project-file.jsp" class="coolbg">返回</a>
            </td>
        </tr>
    </table>
</form>
</body>

controller层

@Controller
@RequestMapping("/attachment")
public class AttachmentController {

    @Autowired
    private AttachmentService attachmentService;

    @RequestMapping(value = "/save")
    @ResponseBody
    public Map<String,Object> saveAttachment(Attachment attachment, MultipartFile document, HttpSession session) throws IOException {
        ServletContext servletContext = session.getServletContext();
        String realPath = servletContext.getRealPath("/upload");
        File directory = new File(realPath);
        if (!directory.exists()){
            directory.mkdirs();
        }
        String filename = UUID.randomUUID().toString().replaceAll("-","")+document.getOriginalFilename();
        document.transferTo(new File(realPath+"/"+filename));
        attachment.setPath(filename);
        attachmentService.save(attachment);
        Map<String,Object> map = new HashMap<String, Object>();
        map.put("status",200);
        map.put("message","上传成功！");
        return map;
    }
}

service层

@Service
public class AttachmentServiceImpl implements AttachmentService{

    @Resource
    private AttachmentMapper attachmentMapper;

    public void save(Attachment attachment) {
        attachmentMapper.insert(attachment);
    }
}

文件上传——异步

js中获取文件

var document= $("input[name='document']")[0].files[0];

上传文件必须要设置如下两个属性

contentType:false,//防止jquery修改文件类型
processData:false,//防止jQuery对文件内容进行修改

异步文件上传，文件不能以键值对（data）的方式传到后台，要创建一个formData 的表单对象，把数据填进表单

var formData = new FormData();

完整js

function commit() {
    var proFk=  $("#selectProject").val();
    var attname = $("input[name='attname']").val();
    var attdis = $("input[name='attdis']").val();
    var remark = $("textarea[name='remark']").val();
    //获取文件
    var document= $("input[name='document']")[0].files[0];
    //创建表单对象
    var formData = new FormData();
    formData.append("proFk",proFk);
    formData.append("attname",attname);
    formData.append("attdis",attdis);
    formData.append("remark",remark);
    formData.append("document",document);

    $.ajax({
        type:"POST",
        url:"${pageContext.request.contextPath}/attachment/save",
        data:formData,
        contentType:false,//防止jquery对文件类型做修改
        processData:false,//不让jquery对文件内容做处理
        success:function (msg) {
            if(msg.statusCode == 200){
                window.location.href="${pageContext.request.contextPath}/project-file.jsp";
            }
        }
    });

}

后端代码同上

小杨与bug的斗争

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day04附件上传同步和异步两种方式

文章目录文件上传——同步文件上传——异步文件上传——同步前端要求：encytype=“multipart/form-data”method=“post”input type=“file”后端要求：导入文件上传所需要的commons-fileupload和commons-io包必须在springmvc的配置文件中配置多媒体解析器controller层目标方法的参数必须是Mu...
复制链接

扫一扫

专栏目录