zoukankan      html  css  js  c++  java
  • jQuery OCUpload ——> 一键上传插件

         OCUpload为jQuery的插件(One Click Upload),意思为一键上传,封装了对于文件上传的一些方法,只需几行代码,文件上传优雅而简洁。 
         对于传统的文件上传,只是通过input标签,通过设置enctype为multipart/form-data,选中文件后还需点击按钮,提交表单,才能在后台进行相关字段解析,通过流来进行文件上传,上传成功后,页面多半要刷新,无法给用户良好的体验。OCUpload实现了页面“不刷新”,选择文件后直接上传,不需要选中文件后再点击按钮上传表单。

         ajax不能做文件上传。

    插件使用步骤

    1. 在页面中引入OCUpload插件的js文件

    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.ocupload-1.1.2.js"></script>

    2. 在页面中提供任意一个元素来“占位子”(上传文件一般选择按钮,所以这里利用easyui定义一个按钮)

    <body>
      <a id="import" class="easyui-linkbutton" data-options="iconCls:'icon-redo'">上传文档</a>
    </body>

    3. 在head中给id为import的按钮添加upload事件,这是OCUpload的上传方法,参数为json对象。

          由于是简单入门,在这里即使用三个主要的属性:

               action(处理上传文件的后台action路径),name(给文件设置name,便于后台通过name获取),onComplete(参数为function,执行上传完毕的回调函数)。

    <script type="text/javascript">
        $(function(){
            $("#import").upload({
            action:'${pageContext.request.contextPath}/regionAction_importXls',
            name:'upload',
            onComplete: function (data, self, element) { 
             if(data=='1'){
                    $.messager.alert("提示信息","数据导入成功!","info");
                }else{
                    $.messager.alert("提示信息","数据导入失败!","info");
                }
                    location.reload();
            }
        });
    });
    </script>

    到此便完成一键上传的前台代码,只需要后台对上传文件进行解析处理即可完成文件上传。

    原理:

    • OCUpload将我们的linkbutton底部添加了一个带有文件input的form和一个display:none 不可见的iframe。
    • 选择文件后form中的input触发onChange事件,直接提交表单,实现了选择文件后直接上传
    • 文件上传后,本来页面是要刷新的,但是OCUpload将target指向底部隐藏的iframe,使得隐藏的iframe刷新,从而达到我们的页面“不刷新”的效果

    官方上传例子:

    $(element).upload({
                    name: 'file',//上传组件的name属性,即<input type='file' name='file'/>
                    action: '',//向服务器请求的路径
                    enctype: 'multipart/form-data',//mime类型,默认即可
                    params: {},//请求时额外传递的参数,默认为空
                    autoSubmit: true,//是否自动提交,即当选择了文件,自动关闭了选择窗口后,是否自动提交请求。
                    onSubmit: function() {},//提交表单之前触发事件
                    onComplete: function() {},//提交表单完成后触发的事件
                    onSelect: function() {}//当用户选择了一个文件后触发事件
            });

     注意:OCUpload只是在前台页面中把文件上传,上传之后需要在后台对文件进行解析,这里使用到了apache POI对excel文件进行解析。

  • 相关阅读:
    实验二
    个人简介及对未来的想法
    读《构建之法》心得体会
    作业2
    个人简介
    第六次作业
    第二次作业
    个人简历
    购物系统测试缺陷报告
    读《构建之法》心得体会
  • 原文地址:https://www.cnblogs.com/zjfjava/p/7041183.html
Copyright © 2011-2022 走看看