一、普通文件上传方式jsp页面

  enctype有三种属性值:

    第一种:application/x-www-form-urlencoded(默认的在发送前编码所有字符)

    第二种:text/plain(空格转换为 "+" 加号,但不对特殊字符编码。)

    第三种:multipart/form-data(不对字符编码。在使用包含文件上传控件的表单时,必须使用该值。)

  1.1普通方式:页面会跳转

<form action="xxx" method="post" enctype="multipart/form-data">
    <input type="file" name="upload">
    <input type="submit">
</form>

  1.2特殊处理后,表面上看起来页面没有跳转,而本质上页面跳转到了iframe中,而iframe被隐藏了,参数none表示隐藏,block表示显示

<iframe name="abc" style="display: none"></iframe>
<form target="abc" action="xxx" method="post" enctype="multipart/form-data">
    <input type="file" name="upload">
    <input type="submit">
</form>

2.使用一键上传方式的jsp页面

  首先引入ocupload.js文件,需要注意的是,该文件同时依赖jquery.js,所以需要在引入前将jquery同时引入进来,另外还需要注意引入顺序,正确的顺序应该是先是jquery再是ocupload.js文件,它实现的原理和上面1.2类似,其最终还是生成了一个input和一个iframe。

如下所示:

<head>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.ocupload-1.1.2.js"></script>
<script type="text/javascript">
    $(function(){
        $("#btn").upload({
            action:'xxx.action',
            name:"myFile"
        });
    })
</script>
</head>
<body>
<input id="btn" type="button" name="button" value="button">
</body>

亲测后需要注意的是,upload中的属性含义, 如果没有写某些参数,意味着,使用模板的参数:

     name: ‘file‘,   //新生成input元素的name
        action: ‘‘,   //请求路径
        enctype: ‘multipart/form-data‘,   //表单提交方式
        params: {},   //参数,json格式
        autoSubmit: true,  //自动提交,当选择文件后,文件会自动提交
        onSubmit: function() {},     //当提交时执行此函数  执行顺序(2)
        onComplete: function(response) {},     //当提交完成,响应此函数   执行顺序(3)
        onSelect: function() {}   //当选择时,执行此函数   执行顺序(1)