上传图片_WebUploader

1、uploader初始化

       var uploader = WebUploader.create({
            auto: false,                     //自动上传
            server: '/Home/Upload',
            swf: '/open/webuploader/Uploader.swf',
            pick: '#lot-picker',
            //chunked: true,                //断点续传-单个默认5M
            duplicate: false,               //文件去重
            prepareNextFile: true,          //提前准备下一个文件（可选，单文件不建议开）
            //formData: { },                //自定义参数表，每次请求都会发送这些参数
            paste: document.body,           //启动剪贴板（可选）
            dnd: $('#lot-uploader'),        //启动拖拽（可选）
            fileNumLimit: 5,                //文件总数量
            fileSingleSizeLimit: 10485760,  //单个文件最大值（IIS默认<=4M,可自行设置：httpRuntime的maxRequestLength）
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            }
        });

2、文件添加时，添加样式和缩略图

        uploader.on('fileQueued', function (file) {
            var $li = $(
                    '<div id="' + file.id + '" class="file-item thumbnail">' +
                        '<img>' +
                        '<div class="info info-top">Szie：' + Math.floor(file.size / 1024) + 'kb' + '</div>' +
                        '<div class="info info-bot">' + file.name + '</div>' +
                    '</div>'
                    ),
                $img = $li.find('img');
            $('#lot-filelist').append($li);  //给缩略图添加图片
            // 创建缩略图
            uploader.makeThumb(file, function (error, src) {
                if (error) {
                    $img.replaceWith('<span>不能预览</span>');
                    return;
                }
                $img.attr('src', src);
            }, 100, 100);
            计算文件MD5（可加）
            //uploader.md5File(file).then(function (val) {
            //    console.log('md5:',val,'-',file.name);
            //});
        });

3、文件上传过程中，进度条实时显示

        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 + '%');
        });

 4、文件上传成功，给item添加成功class, 用样式标记上传成功。

         uploader.on('uploadSuccess', function (file, data) {    //上传成功执行的方法
            if (data.status) {
                $('#' + file.id).addClass('upload-state-done');
            } else {
                showMsg(file, data.msg);
            }
        });

5、失败_添加失败处理

    uploader.on('error', function (log) {
            switch (log) {
                case 'F_EXCEED_SIZE':
                    addMsg('文件10M以内'); break;
                case 'Q_EXCEED_NUM_LIMIT':
                    addMsg('已超最大上传数'); break;
                case 'Q_TYPE_DENIED':
                    addMsg('文件类型不正确'); break;
                case 'F_DUPLICATE':
                    addMsg('文件已经被添加'); break;
                default:
                    addMsg('文件添加失败~'); break;
            }
        });

6、失败_上传失败处理

   uploader.on('uploadError', function (file) {
            showMsg(file, '上传失败');
   });

7、错误信息

       //错误信息显示
        function showMsg(file, msg) {
            var $li = $('#' + file.id), $error = $li.find('div.error');
            //避免重复创建
            if (!$error.length) {
                $error = $('<div class="error"></div>').appendTo($li);
            }
            $error.text(msg);
        }
        //错误信息提示
        function addMsg(msg) {
            $('#lot-uploader').prepend('<h3 class="temp-log" style="color:red;">' + msg + '</h3>')
            setTimeout(function () {
                $('.temp-log').remove();
            }, 2000);
        }