plupload一个前端上传组件

最新推荐文章于 2025-03-03 08:39:35 发布

lg_lin

最新推荐文章于 2025-03-03 08:39:35 发布

阅读量2.5k

点赞数 1

分类专栏： JavaScript jQuery

本文链接：https://blog.youkuaiyun.com/lg_lin/article/details/51498630

版权

JavaScript 同时被 2 个专栏收录

13 篇文章

订阅专栏

jQuery

11 篇文章

订阅专栏

官网：https://github.com/moxiecode/plupload

中文文档：http://www.cnblogs.com/2050/p/3913184.html

直接上干货

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>plupload前端上传插件</title>
</head>

<!-- include libraries(jQuery, bootstrap) -->
<script type="text/javascript" src="__ROOT__/Public/js/jquery.min.js"></script> 
<script type="text/javascript" src="__ROOT__/Public/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="__ROOT__/Public/css/bootstrap.min.css" />

<script src="__ROOT__/Public/plugins/plupload/js/plupload.full.min.js"></script>




<body>
<!-- 这里我们只使用最基本的html结构：一个选择文件的按钮，一个开始上传文件的按钮(甚至该按钮也可以不要) -->
    <p>
        <button id="browse">选择文件</button>
        <button id="start_upload">开始上传</button>
    </p>
    <script>

    //实例化一个plupload上传对象
    var uploader = new plupload.Uploader({
        browse_button : 'browse', //触发文件选择对话框的按钮，为那个元素id
        url : "{:U('Test/upload')}", //服务器端的上传页面地址
        flash_swf_url : 'js/Moxie.swf', //swf文件，当需要使用swf方式进行上传时需要配置该参数
        silverlight_xap_url : 'js/Moxie.xap' //silverlight文件，当需要使用silverlight方式进行上传时需要配置该参数
    });    

    //在实例对象上调用init()方法进行初始化
    uploader.init();

    //当文件添加到上传队列后触发
    uploader.bind('FilesAdded',function(uploader,files){
        uploader.start();
    });
	
	//当队列中的某一个文件上传完成后触发
	uploader.bind('FileUploaded',function(uploader,file,responseObject){
        //alert(responseObject.response);
		console.log(uploader);
		console.log(file);
		console.log(responseObject);
    });
	
	//会在文件上传过程中不断触发，可以用此事件来显示上传进度
    uploader.bind('UploadProgress',function(uploader,file){
        //TODO
		alert('a');
    });

    //最后给"开始上传"按钮注册事件
    document.getElementById('start_upload').onclick = function(){
        uploader.start(); //调用实例对象的start()方法开始上传文件，当然你也可以在其他地方调用该方法
    }

    </script>
</body>
</html>