上传文件之一键上传

一、普通文件上传方式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)

Best Regards