webUploader百度上传控件使用心得以及jfinal文件上传保存

这里先知道怎么用吧，后期想拓展再深入研究（主要是我也没看明白）。
首先：js文件引入

<script src="${CONTEXT_PATH}/Resource/scripts/jquery-1.10.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="${CONTEXT_PATH}/Resource/baiduupload/webuploader.css">
<script type="text/javascript" src="${CONTEXT_PATH}/Resource/baiduupload/webuploader.js"></script>

然后定义Dom：

<th>近期照片:</th>
    <td colspan="1">
        <div id="thelist" class="uploader-list"></div>
    </td>
    <td>
        <div class="btns">
           <div id="picker" >选择图片</div>
           <div id="ctlBtn" class="webuploader-pick" onmouseover="mouseO();" onmouseout="mouseOt();" >开始上传</div>
        </div>
     <input id="lb" name="photos" type="hidden" runat="server" />
    </td>
    //这里：runat="server"没必要写，是回交给服务器

最后，就是copy他的js

<script type="text/javascript">
 // 文件上传
    jQuery(function () {
        var $ = jQuery,
            $list = $('#thelist'),
            $btn = $('#ctlBtn'),
            state = 'pending',
            ratio = window.devicePixelRatio || 1,
    // 缩略图大小
    thumbnailWidth = 150 * ratio,
    thumbnailHeight = 150 * ratio,
            uploader;

        uploader = WebUploader.create({

            // 不压缩image
            resize: false,

            // swf文件路径
            swf: 'webUploader/Uploader.swf',

            // 文件接收服务端。
            server: '${MH}/expertInfo/savePhotos',
            fileNumLimit: 1,//设置可上传文件数量

            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#picker',
            // 只允许选择文件，可选。
            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 id="info" runat="server">' + file.name + '</div>' +
                '<p class="state">等待上传...</p>' +
           '</div>'
           ),
       $img = $li.find('img');

            $list.append($li);

            // 创建缩略图
            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 .progress-bar');

            // 避免重复创建
            if (!$percent.length) {
                $percent = $('<div class="progress progress-striped active">' +
                  '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                  '</div>' +
                '</div>').appendTo($li).find('.progress-bar');
            }

            $li.find('p.state').text('上传中');

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

        uploader.on('uploadSuccess', function (file) {
            $('#' + file.id).find('p.state').text('已上传');
        });

        uploader.on('uploadError', function (file) {
            $('#' + file.id).find('p.state').text('上传出错');
        });

        uploader.on('uploadComplete', function (file) {
            $('#' + file.id).find('.progress').fadeOut();
        });

        uploader.on('all', function (type) {
            if (type === 'startUpload') {
                state = 'uploading';
            } else if (type === 'stopUpload') {
                state = 'paused';
            } else if (type === 'uploadFinished') {
                state = 'done';
            }

            if (state === 'uploading') {
                $btn.text('暂停上传');
            } else {
                $btn.text('开始上传');
            }
        });

        $btn.on('click', function () {
            if (state === 'uploading') {
                uploader.stop();
            } else {
                uploader.upload();
            }
            $("#lb").val($("#info").text());//这里是把文件名赋值给标签
        });


    });
    //下面是鼠标放上去的效果，可以无视
    function mouseO() {
        $("#ctlBtn").addClass("webuploader-pick-hover");
    }

    function mouseOt() {
        $("#ctlBtn").removeClass("webuploader-pick-hover");
    }
    </script>

关于后台的处理：我是使用的jfinal，后台直接获取文件，废话不多说：

/**
     * 处理图片方法
     */
    public String savePhotos(){
        String fileName ="";
        UploadFile  uploadFile = this.getFile();
        fileName = uploadFile.getOriginalFileName();
        System.out.println(fileName);
        //定义位置：
        String savePath = PathKit.getWebRootPath()+"\\upload\\";
        //获取图片后缀
        String type = fileName.substring(fileName.lastIndexOf("."));
        fileName = UUID.randomUUID()+type;  //随机生成文件名字
        //创建文件夹
        File filePath = new File(savePath);
        if(!filePath.exists()){//判断是否存在
            filePath.mkdirs();
        }
        String dest = savePath+"\\"+fileName;
        System.out.println(dest);
        //创建文件
        File newFile = new File(dest);
        //获取文件
        File file = uploadFile.getFile();
        //实例化文件复制类
        FileService fileService = new FileService();
        try{
            newFile.createNewFile();

        }catch(Exception e){
            e.printStackTrace();
        }
        //开始文件复制
        fileService.fileChannelCopy(file,newFile);
        file.delete();
        //定义数据库存储路径
        String savePathForDateBase="/upload/"+fileName;
        return savePathForDateBase;
    }

这里有关于fileService的调用，这里我写了一个接口：

public class FileService {

    public void fileChannelCopy(File s,File t){

        FileInputStream fi = null;

        FileOutputStream fo = null;

        FileChannel in = null;

        FileChannel out = null;

        try{
            fi = new FileInputStream(s);

            fo = new FileOutputStream(t);

            in = fi.getChannel();//得到对应的文件通道

            out = fo.getChannel();//得到对应的文件通道

            in.transferTo(0, in.size(), out);//连接两个通道，并且从in中开始读取写入到out通道

        }catch(Exception e){
            e.printStackTrace();
        }finally{
            try{
                fi.close();

                in.close();

                fo.close();

                out.close();
            }catch(Exception e){
                e.printStackTrace();
            }
        }

    }

}

这里要提醒自己一点：进行上传文件的时候，只有该文件夹存在的条件下才能将文件进行创建。！
这里我定义为有返回值是因为我需要图片的存储地址存到数据库中，需要的时候前台直接调取；
这里提一点，img标签无法加载本地绝对路径图片，不知为何。Chrome貌似出于安全考虑不让加载。所以只能加载服务端了。