批量上传功能(SWF插件)

1.使用环境

  1> jar包:

      commons-fileupload-1.2.2.jar

      commons-io-2.4.jar

  2> js

      handlers.js

      swfupload.js

      swfupload.swf

  3> css

      button.css

      default.css

   建议:下载一个demo,然后把所需要的jar包和样式拷贝到项目里,如果后期嵌入项目的样式不符合要求,可以根据客户需求来更改。

2.嵌入到项目

     1> jsp页面

        1.1> js引入到jsp页面       

        <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
        <script type="text/javascript" src="js/swfupload/swfupload.js"></script>
        <script type="text/javascript" src="js/swfupload/handlers.js"></script>

        1.2> js函数

        <script type="text/javascript">
            var swfu;
            $(document).ready(function(){
                swfu = new SWFUpload({
                    upload_url:'url',//url地址,指向后台
                    post_params: {"param1":"param1","param2":"param2"}, //参数以json格式传递
                    use_query_string:true,
                    // File Upload Settings
                    file_size_limit : "10 MB",    // 文件大小控制
                    file_types : "*.*",
                    file_types_description : "All Files",
                    file_upload_limit : "0",
                    file_queue_error_handler : fileQueueError,
                    file_dialog_complete_handler : fileDialogComplete,//选择好文件后提交
                    file_queued_handler : fileQueued,
                    upload_progress_handler : uploadProgress,
                    upload_error_handler : uploadError,
                    upload_success_handler :uploadSuccess,
                    upload_complete_handler : uploadComplete,
                    button_placeholder_id : "spanButtonPlaceholder",
                    button_width: 200,
                    button_height: 25,
                    button_text : '<span class="button">点击此处选择文件 </span>',
                    button_text_style : '.button { font-family: 微软雅黑, Arial, sans-serif; font-size: 12pt; } .buttonSmall { font-size: 12pt; }',
                    button_text_top_padding: 0,
                    button_text_left_padding: 18,
                    button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT,
                    button_cursor: SWFUpload.CURSOR.HAND,
                    // Flash Settings
                    flash_url : "js/swfupload/swfupload.swf",
                    custom_settings : {
                        upload_target : "divFileProgressContainer"
                    },
                    // Debug Settings
                    debug: false  //是否显示调试窗口
                });
            });
            

            //点击上传按钮,实现多文件上传
            function startUploadFile(){
                var infoTable = document.getElementById("infoTable");
                var rows = infoTable.rows; //获取行
                var cell = rows[1].cells; //获取第一行的列
                var concent = cell[2].innerHTML;//获取第一行第三列的值
                var btnCancel=document.getElementById("btnCancel");
                if(concent!=null){
                   $(btnCancel).hide();
                }else{
                   $(btnCancel).show();
                }
                swfu.startUpload();
            }    
        </script>

        1.3> 页面布局

        <body style=" padding: 2px;">
        <div id="content">
              <div style="margin:0px auto;width:370px;height:31px;  border: 1px #c3c3c3 solid; ">
                <div style="float:right;">
                   <input id="btnUpload" type="button" value="上  传"  style="margin-right: 2px;margin-top:3px;height: 24px" 

                         onclick="startUploadFile()"/>
                   <input id="btnCancel" type="button" value="取消所有上传" onclick="cancelUpload()" style="margin-right: 2px;height: 24px"

                          disabled="disabled"/>
                </div>
                <div style="position: absolute;margin-top:5px"><span  id="spanButtonPlaceholder"></span></div>
             </div>
             <table width="540px" id="infoTable" border="0">
               <tr style="height: 0px"><th width="125px"></th><th></th><th width="100px"></th><th width="40px"></th></tr>
             </table>
             <div id="divFileProgressContainer"></div>
        </div>    
        </body>   

      2> 代码

              response.setContentType("text/html;charset=utf-8");
              MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest)request;
              Map<String, MultipartFile> fileMap = multipartRequest.getFileMap();

              //获取文件名
              String fileNameAll = fileMap.get("Filedata").getOriginalFilename();
              //文件内容
              byte [] postData = fileMap.get("Filedata").getBytes();

              //具体的业务代码

 

posted on 2016-12-13 10:57  jlyy  阅读(142)  评论(0编辑  收藏  举报

导航