plupload图片上传

//引入js文件
<script src="../static/js/plupload.full.min.js"></script>
<script>
//    实例化一个plupload上传对象
    var uploader = new plupload.Uploader({
        browse_button : 'addHeadImg',
        url : '/img/update',
        multi_selection:false,
        flash_swf_url : 'js/Moxie.swf',
        silverlight_xap_url : 'js/Moxie.xap',
        filters: {
            mime_types : [{
                title : "图片文件",
                extensions : "jpg,gif,png,jpeg",
                max_file_size : '1024kb'
            }]
        }
    });
//在实例对象上调用init()方法进行初始化
    uploader.init();
//    绑定各种事件
//当文件添加到上传队列后触发
    uploader.bind('FilesAdded',function(uploader,files){
        for(var i = 0, len = files.length; i<len; i++){
            //构造html来更新UI
            (function(i){
                previewImage(files[i],function(imgsrc){
                    //如果文件大小大于1M
                    if(files[i].size>1048576){
                        layer.msg('上传的图片大小不能大于1M');
                    }else{
                        $('.headImg-preview img').attr('src',imgsrc);
                        $('.user-home_headImg img').attr('src',imgsrc);
                    }
                });
            })(i);
        }
        uploadType = false;
    });
    //当队列中的某一个文件正要开始上传前触发 
    uploader.bind('BeforeUpload',function (uploader,file) {
        layer.load(1, {shade: [0.1,'#fff']});
    });
    //当队列中的某一个文件上传完成后触发
    uploader.bind('FileUploaded',function (uploader,file,responseObject) {
        uploadImg = responseObject.imagePath;
    });
// 当上传队列中所有文件都上传完成后触发
    uploader.bind('UploadComplete',function (uploader,files) {
        layer.closeAll();
        layer.open({
            type: 1,
            title: false,
            shade:0,
            closeBtn: 0,
            shadeClose: true,
            time:3000,
            area:['188px','68px'],
            content: '<div class="success-open-dialog"><img src="/static/images/success-open.png" style="vertical-align: middle;" class="mr5"/><span style="font-size: 16px;vertical-align: middle;">上传成功!</span></div>'
        });
    });
</script>

 

posted @ 2017-01-05 17:54  donglf  阅读(388)  评论(0)    收藏  举报