zoukankan      html  css  js  c++  java
  • 使用plupload上传(预览图片)

    1. plupload常用配置

    var uploader = new plupload.Uploader({
        /*runtimes: "flash",*/      // 不需要配置
        container: document.body,   // 使用flash必须采用body,否则定位出错
        browse_button: ["fileBtn"], // 选择文件按钮id
        url: "/file/upload.php",
        flash_swf_url: './moxie.swf',
        multipart: true,
        multipart_params: {},
        file_data_name: 'files',
        filters:{
            prevent_duplicates: true,
            mime_types : [
                {
                    title: 'Image files',
                    extensions: 'jpg,jpeg,png,JPG,JPEG,PNG'
                }
            ],
            max_file_size: '10mb'
        }
    });

    2. uploader添加文件之后生成预览

    var MAX_FILE_NUM = 20;  // 上传最大文件个数
    // 添加文件
    uploader.bind('FilesAdded',function(uploader,addFiles){
        var oldLen = uploader.files.length - addFiles.length;
    
        // 根据最大文件数量截取
        uploader.files.splice(MAX_FILE_NUM, uploader.files.length);
        addFiles = addFiles.slice(0, MAX_FILE_NUM - oldLen);
    
        // 对addFiles分别生成base64编码,用于预览
        $.each(addFiles || [], function(i, file) {
    
            if (!file || !/image//.test(file.type)) return; //确保文件是图片
            if (file.type == 'image/gif') {//gif使用FileReader进行预览,因为mOxie.Image只支持jpg和png
                var fr = new mOxie.FileReader();
                fr.onload = function () {
                    file.imgsrc = fr.result;
                    fr.destroy();
                    fr = null;
                }
                fr.readAsDataURL(file.getSource());
            } else {
                var preloader = new mOxie.Image();
                preloader.onload = function () {
                    preloader.downsize(180, 120);//先压缩一下要预览的图片
                    var imgsrc = preloader.type == 'image/jpeg' ? preloader.getAsDataURL('image/jpeg', 80) : preloader.getAsDataURL(); //得到图片src,实质为一个base64编码的数据
                    file.imgsrc = imgsrc;
                    preloader.destroy();
                    preloader = null;
                };
                preloader.load(file.getSource());
            }
    
        });
    });

    3. uploader上传完成的回调

    var upFlag = true;
    // 单个文件上传完成
    uploader.bind('FileUploaded', function(uploader,file, res){
        try {
            var json = $.parseJSON(res.response);   // 后端返回的标志
            if(!json || !json.ret) {
                upFlag = false;
                console.log("上传失败!"+ (json.msg || ""));
            }
        } catch(e) {
            upFlag = false;
        }
    
    });
    // 所有文件上传完成
    uploader.bind('UploadComplete', function(uploader,files){
        if(upFlag) { // 上传成功
            window.location.reload(true);
        } else {
            // 重新设置可上传
            $.each(files || [], function(i, file) {
                file.status = plupload.QUEUED;
            });
        }
    });

    4. 注意使用flash的时候需要使用fresh方法来更新flash的位置

    uploader.bind('Refresh', function(uploader,err){
        $('.moxie-shim').css('z-index', '14');
    });

    5. 开始上传

    upFlag = true;
    
    uploader.setOption("multipart_params", {
        param1: "1",
        param2: "2"
    });
    uploader.start();
  • 相关阅读:
    Windows下使用CMake编译SuiteSparse成VS工程
    【设计模式
    【设计模式
    vue过滤和复杂过滤
    el-tooltip 自定义样式
    el-table加表单验证
    使用Go env命令设置Go的环境
    面试官:GET 和 POST 两种基本请求方法有什么区别?
    解决 Vue 重复点击相同路由报错的问题
    利用promise和装饰器封装一个缓存api请求的装饰器工具
  • 原文地址:https://www.cnblogs.com/defghy/p/5098746.html
Copyright © 2011-2022 走看看