Jfinal +百度WebUploader组件实现多图片上传实例

访客7年前Jfinal4509


百度 Web Uploader文档的getting-started文档说明太简单,没有写全,在这里给大家补全(

$list会报没有定义,文档中确实没给定义



效果:

图片.png

有用部分

图片.png

外部jar包


jfinal-2.0-bin-with-src.jar(JFinal核心包)  
fastjson-1.2.7.jar(用于json数据的处理)  
cos-26Dec2008.jar(支持JFinal自带的上传功能)


1. 引入 css,js外部文件


<link id="bscss" href="${root}/bootstrap/css/bootstrap.css"
    rel="stylesheet">
<link rel="stylesheet" type="text/css"
    href="${root!}/webUploader/webuploader.css">
<link rel="stylesheet" type="text/css"
    href="${root!}/webUploader/style.css"><!--从官网下载的实例中有 -->
<script src="${root!}/resource/front/js/jquery-1.9.1.min.js"
    type="text/javascript"></script>
<script src="${root}/bootstrap/js/bootstrap.js" type="text/javascript"></script>
<script type="text/javascript">
    var BASE_URL = '${root!}/webUploader';
</script>
<script src="${root!}/webUploader/webuploader.js"></script>
2.页面部分,写容器dom

用来放置webuploader的dom

 <div id="uploader-demo">
    <!--用来存放item-->
    <div id="fileList" class="uploader-list"></div>
    <div id="filePicker">选择图片</div>
</div>
3.JS部分, 初始化webuploader组件,设置上传等事件监听。

<script type="text/javascript">
    $(function() {
        var $list = $("#fileList"); //这几个初始化全局的百度文档上没说明,气的肝疼。  
        //var $btn = $("#ctlBtn"); //开始上传  
        var thumbnailWidth = 100; //缩略图高度和宽度 (单位是像素),当宽高度是0~1的时候,是按照百分比计算,具体可以看api文档  
        var thumbnailHeight = 100;
        // 初始化Web Uploader
        var uploader = WebUploader.create({

            // 选完文件后,是否自动上传。
            auto : true,

            // swf文件路径
            swf : BASE_URL + '/Uploader.swf',

            // 文件接收服务端。
            server : '${root!}/check/uploads/111',

            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建,可能是input元素,也可能是flash.
            pick : '#filePicker',

            // 只允许选择图片文件。
            accept : {
                title : 'Images',
                extensions : 'gif,jpg,jpeg,bmp,png',
                mimeTypes : 'image/*'
            }
            
        });

        // 当有文件添加进来的时候
        uploader.on(
                        'fileQueued',
                        function(file) {
                            var $li = $('<div id="' + file.id + '" class="file-item thumbnail">'
                                    + '<img>'
                                    + '<div class="info">'
                                    + file.name + '</div>' + '</div>'), 
                                    $img = $li.find('img');
                            // $list为容器jQuery实例
                            $list.append($li);

                            // 创建缩略图
                            // 如果为非图片文件,可以不用调用此方法。
                            // thumbnailWidth x thumbnailHeight 为 100 x 100
                            uploader.makeThumb(file, function(error, src) {
                                if (error) {
                                    $img.replaceWith('<span>不能预览</span>');
                                    return;
                                }

                                $img.attr('src', src);
                            }, thumbnailWidth, thumbnailHeight);
                        });
        // 文件上传过程中创建进度条实时显示。
        uploader.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.on('uploadSuccess', function(file) {
            $('#' + file.id).addClass('upload-state-done');
        });

        // 文件上传失败,显示上传出错。
        uploader.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('上传失败');
        });

        // 完成上传完了,成功或者失败,先删除进度条。
        uploader.on('uploadComplete', function(file) {
            $('#' + file.id).find('.progress').remove();
        });

    });
</script>

4. 后台部分,获取文件

public class CheckController extends Controller{   
    /**
     * 上传附件
     */ 
    public void uploads() {
        String uuid = getPara();
        // 上传代码
        UploadFile uf = getFile("file","check");//获得文件及设置其保存路径。file,默认的name;check,图片保存的路径
         String fileName=uf.getFileName();
        //获得到了端口
        String url ="/upload/check/"+uf.getFileName();
       
        SpotFile spotFile = new SpotFile();
        spotFile.setSpot_id(uuid);
        spotFile.setUrl(url);
        spotFile.setName(fileName);

         spotFile .save();
        
        setAttr("fileName",fileName);
        setAttr("uuid",uuid);
        renderJson();
    }
}


相关文章

tuya SaaS前端框架本地运行时候报错Delete `␍`eslint(prettier/prettier)

 根据官方文档的步骤,本地idea运行tuya的 SaaS前端框架,在执行编译命令yarn run build 时报错Delete `␍`eslint(prettier/prett...

springboot框架 后台获取微信小程序用户的openid

小程序端app.js中:// 登录     wx.login({       succ...

java解析JSON 数组数据 实例

 public  static void main (String args[]){  String sJson ="[{'acceptTim...

MyEclipse恢复默认主题及主题更换

一.快速恢复默认主题:打开MyEclipse工作空间,即盘符:\你的工作空间\.metadata\.plugins\org.eclipse.core.runtime下的.settings文件夹,直接删...

plsql 中number类型字段 取消科学计数法显示

 PL/SQL DEVELOPER中禁用科学计数法:Tools - Prefrence - SQL Window - 选择:"Number fields to_char&quo...

oracel如何找回被删除的数据

---此sql是查询这个时间段前的数据select * from tableName as of timestamp to_timestamp('2011-05-21 11:40:00'...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。