使用plupload实现无刷新上传图片

最新推荐文章于 2022-09-08 14:43:46 发布

天蝎座的贱人

最新推荐文章于 2022-09-08 14:43:46 发布

阅读量4.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery 文章标签： jquery js上传进度条 plupload

本文链接：https://blog.youkuaiyun.com/scopop/article/details/8591366

jquery 专栏收录该内容

2 篇文章

订阅专栏

本文介绍使用 Plupload 库实现多文件上传的方法。通过配置 JavaScript 代码，可以轻松实现包括图片在内的多种文件类型的上传功能，并支持上传进度显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简介：plupload是一个web上传模块，能实现多文件上传，缩略图，进度条

官网：http://www.plupload.com/index.php

下载配置部分略过以上下主题代码结构

<script type="text/javascript" src="plupload.js"></script>
<script type="text/javascript">
jQuery(function() {
    var uploader = new plupload.Uploader({
        runtimes : 'html5,flash',
        browse_button : 'uploadid', // 单击事件的id
        max_file_size : '10mb',
        url : '上传路径',
        multiple_queues : false,
        multi_selection : false,
        multipart_params:{},
        flash_swf_url : '/static/swf/plupload.flash.swf',
        filters : [{title : "图片文件", extensions : "png,jpg,jpeg,gif"}]// 允许的文件后缀
    });
    
    uploader.bind('UploadProgress', function(up, file) {
        //上传的进度
    });
    
    uploader.bind('QueueChanged', function(){
        //上传的队列改变 也就是选择文件的完成
    });
    
    uploader.bind('FileUploaded', function(up, file, response) {
        // 上传完成
    });
    
    
    uploader.bind("Error", function(up, err) {
        // 上传失败
    });
    
    uploader.init();//初始化
    //uploader.start();// 开始上传 自己定义事件
    
})
</script>
<body>
<div id="uploadid" class="left btn">浏览</div>
</body>