在jsp中如何多实例使用百度上传控件

<link href="${ctxStatic}/jqGrid/4.6/css/ui.jqgrid.css" type="text/css" rel="stylesheet" />
<script src="${ctxStatic}/jqGrid/4.7/js/jquery.jqGrid.js" type="text/javascript"></script>
<script src="${ctxStatic}/jqGrid/4.7/js/jquery.jqGrid.extend.js" type="text/javascript"></script>
<script type="text/javascript" src="${ctxStatic}/webuploader/webuploader.js"></script>
<link rel="stylesheet" type="text/css" href="${ctxStatic}/webuploader/webuploader.css" />


//每个uploader 的实例都给class 属性upload_container, 这样通过类选择器的each函数我们
        //就可以遍历每个uploader 并且实例化了
        var uploader=new Array($('.upload_container').length);
        $('.upload_container').each(function(index) {
            var list = $(this).find('#fileList');
            var filePicker = $(this).find('#filePicker');//上传按钮实例
            var btn = $(this).find('#ctlBtn');//上传按钮实例
            //此处为webuploader的实例化过程,加了额下标index
            uploader[index] = WebUploader.create({
                auto : true,
                fileNumLimit : 1,
                fileSizeLimit : 2 * 1024 * 1024,
                fileSingleSizeLimit : 2 * 1024 * 1024,
                method : 'POST',
                thread : 100,
                disableGlobalDnd : true,
                server : '${ctx}/pro/proGoods/FileUpload',
                accept: {                                           // 只允许选择图片文件。
                    title: 'Images',
                    extensions: 'gif,jpg,jpeg,bmp,png',
                    mimeTypes: 'image/jpg,image/jpeg,image/png'
                },
                pick : { id : filePicker },
                formData :{ mydata : '2' }
            });        
        //同理,我们其他的函数也要加上index下标
        //生成缩略图
        uploader[index].on('fileQueued',function(file) {
             var $li = $('<div id="' + file.id + '" class="file-item thumbnail">'
                     + '<img>'
                     + '<div class="info">'
                     + '</div>' + '</div>'), 
                     $img = $li.find('img');
             list.append($li);
             // 创建缩略图
             // 如果为非图片文件,可以不用调用此方法。
             // thumbnailWidth x thumbnailHeight 为 100 x 100
             uploader[index].makeThumb(file,function(error,src) {
                     if (error) {
                         $img.replaceWith('<span>不能预览</span>');
                         return;
                     }
                     $img.attr('src',src);
                     filePicker.hide();
                 }, 66, 66);
             });            
        // 文件上传过程中创建进度条实时显示。
        uploader[index].on( 'uploadProgress', function( file, percentage ) {
            var $li = $( '#'+file.id ),
                $percent = $li.find('.progress span');

            // 避免重复创建
            if ( !$percent.length ) {
                $percent = $('<p class="progress"><span></span></p>')
                        .appendTo( $li )
                        .find('span');
            }

            $percent.css( 'width', percentage * 100 + '%' );
        });

        // 文件上传成功,给item添加成功class, 用样式标记上传成功。
        uploader[index].on( 'uploadSuccess', function( file,response ) {
            var $li = $( '#'+file.id ),
                $msg = $li.find('div.info');

            // 避免重复创建
            if ( !$msg.length ) {
                $msg = $('<div class="info"></div>').appendTo( $li );
            }
            if(response.result){
                $msg.text('上传成功!');
                try { 
                    if(response.data){
                        $li.parent().parent().find("input").val(response.data);
                        console.log(response.data);
                    }
                } catch (ex) { 
                    $li.parent().parent().parent().find('img').eq(0).attr("style", "display:none;")
                    console.log("捕获到异常,但不影响程序运行!异常为domExecept");
                } 
            }else{
                $msg.text('上传失败!');
            }
        });
        //文件上传前
        uploader[index].on( 'uploadBeforeSend', function( object, data,header ) {
            data.remark = $("#remark").val();
        })
        // 完成上传完了,成功或者失败,先删除进度条。
        uploader[index].on( 'uploadComplete', function( file ) {
            $( '#'+file.id ).find('.progress').remove();
        }); 
        // 文件上传失败,显示上传出错。
        uploader[index].on( 'uploadError', function( file ) {
            var $li = $( '#'+file.id ),
                $error = $li.find('div.error');

            // 避免重复创建
            if ( !$error.length ) {
                $error = $('<div class="error"></div>').appendTo( $li );
            }

            $error.text('上传失败!');
        });

        });


--------------------html----------------------
<div id="uploader-demo" class="upload_container">
                <input type="hidden" id="picture" name="GoodsCatRelation.picture" value="${goodsCategory.goodsCatRelation.picture}"/>
                <div id="fileList"></div>
                <div id="filePicker" style="width: 95px;float: left;">选择图片</div>
            </div>

--------------------------------------后台--------------------------------------

/**
     * 商品相册上传
     * 
     * @param request
     */
    @RequestMapping(value = "FileUpload")
    public void FileUpload(HttpServletRequest request, HttpServletResponse response, Model model, String name,
            String filename, @RequestParam("file") MultipartFile fileUpload) {
        // 转换MultipartFile类型为file类型
        CommonsMultipartFile cf = (CommonsMultipartFile) fileUpload;
        DiskFileItem fi = (DiskFileItem) cf.getFileItem();
        File files = fi.getStoreLocation();
        // 文件名
        name = DateUtils.formatDate(new Date(), "yyyyMMddhhmmss") + new Random().nextInt(1000);
        // 得到上传的文件名
        String originalFilename = fileUpload.getOriginalFilename();
        // 拼接文件名
        name += originalFilename.substring(originalFilename.lastIndexOf("."));
        // 文件保存路径
        String savePath = "files/www/files/";
        String mysqlPath = "";// 写入数据库

        String dirName = "goods/images/" + DateUtils.formatDate(new Date(), "yyyy-MM-dd") + "/";
        savePath += dirName;
        mysqlPath += dirName;

        File file = new File(savePath);
        // 生成输入输出流
        InputStream in = null;
        OutputStream out = null;
        // 判断文件是否存在
        if (!file.exists() && !file.isDirectory()) {
            file.mkdirs();
            file.setExecutable(true, false);// 设置可执行权限
            file.setReadable(true, false); // 设置可读权限
            file.setWritable(true, false); // 设置可写权限
        }
        try {
            // 把文件导入输入流
            in = new FileInputStream(files);
            // 生成保存的文件
            File saveFile = new File(file, name);
            // 生成输出流
            out = new FileOutputStream(saveFile);
            // 把输入流copy到输出流
            IOUtils.copy(in, out);
        } catch (Exception e) {

        } finally {
            // 关闭输入输出流
            IOUtils.closeQuietly(in);
            IOUtils.closeQuietly(out);
            logger.info(savePath);
        }
        // 设置返回的json字符串
        response.setContentType("text/xml;charset=utf-8");
        PrintWriter outPrint;
    }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值