plupload文件上传详解及扩展

1.先贴官网下载地址(也可以自行百度其他下载链接):

https://www.plupload.com/

2.文件引用:

<script type="text/javascript" src="js/jquery.min.js"></script>

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

3.使用步骤:

(1)HTML结构:

<p>
        <button id="select">选择文件</button>
        <button id="start">开始上传</button>

 </p>

(2)js:  实例化->初始化->事件监听

以自己的本地项目为例

//实例化uploader对象

var uploader = new plupload.Uploader({
browse_button: 'select',
url: 'url',
flash_swf_url: 'Moxie.swf',
silverlight_xap_url: 'Moxie.xap',
init: {
Error: function(up, err) {

//当服务器端返回错误信息时error方法显示错误提示

                               //关于错误码提示,可查看api文档  

if(err.code == -200) {
alert("文件格式错误，请检查后重新上传!");
}
if(err.code == -600) {
alert("文件太大，请重新选择！");
}
}
},
filters: {

mime_types: [{

                               //限制仅可上传压缩文件

title: "Zip files",
extensions: "zip,rar,7z"
}],
max_file_size: '20mb', //最大只能上传20mb的文件
prevent_duplicates: true, //不允许选取重复文件
}

});

//初始化

uploader.init();

//绑定事件

    uploader.bind('FilesAdded',function(uploader,files){

//生成上传div

        plupload.each(files, function(file) {
document.getElementById('ossfile').innerHTML += '<div id="' + file.id + '">' + file.name + ' (' +                  plupload.formatSize(file.size) + ')<b></b>'
+'<div class="progress"><div class="progress-bar" style="width: 0%"></div></div>'
+'</div>';
 });

       //单文件限制

        if(uploader.files.length > 1) {
alert("只能上传一个文件");
uploader.removeFile(files[0]);
}
    });

    uploader.bind('UploadProgress',function(uploader,file){

//上传进度样式控制

        var d = document.getElementById(file.id);
        d.getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
        var prog = d.getElementsByTagName('div')[0];
var progBar = prog.getElementsByTagName('div')[0]
progBar.style.width= 2*file.percent+'px';
progBar.setAttribute('aria-valuenow', file.percent);

    });

//上传按钮
$('#start').click(function() {
uploader.start(); //开始上传

});

//处理上传完成返回值
var filename;
uploader.bind('FileUploaded', function(uploader, file, result) {
var resdata = $.parseJSON(result.response);
filename = resdata.data;
});

至此,基本的文件上传已全部完成(包含文件个数限制,上传进度显示,错误提示)

如特殊需要上传至阿里云可参考OSS web直传   https://help.aliyun.com/document_detail/31925.html?spm=a2c4g.11186623.6.634.3bJ4Q4

个人认为写的比较全面,同时阿里云对文件名进行了随机生成处理,防止存储重名文件带来的麻烦。