使用PlupLoad js插件进行文件上传案例

案例代码


<html>
<head>
    <meta charset="UTF-8">
    <title>Plupload使用指南title>
    
    <script src="js/plupload.full.min.js">script>
head>
<body>
<p>
    <button id="btn">选择文件button>
p>
<script>

    //实例化一个plupload上传对象
    var uploader = new plupload.Uploader({
        browse_button: 'btn', //触发文件选择对话框的按钮,为那个元素id
        url: 'http://localhost:3000/map', //服务器端的上传页面地址
        filters: {
            //设置允许上传的类型
            max_file_size: '100mb', //设置允许上传的最大文件的大小
            mime_types: [
                //用来限定上传文件的类型,一个类型一个对象,放入当前数组
                {title: 'Image files', extensions: 'jpg,png,tif,bmp'}
            ]
        }
    });

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

    //当文件添加到上传队列后触发监听函数参数
    uploader.bind('FilesAdded', function (uploader, files) {
        //uploader为当前的plupload实例对象,files为一个数组,里面的元素为本次添加到上传队列里的文件对象
        console.log(uploader,files);
        //队列添加文件后,直接调用文件上传,也可以单独拿出
        uploader.start();
    });

    //当队列中的某一个文件正要开始上传前触发监听函数参数
    uploader.bind("BeforeUpload",function (uploader,file) {
        //uploader为当前的plupload实例对象,file为触发此事件的文件对象
        console.log("开始上传",uploader,file);
    });

    //会在文件上传过程中不断触发,可以用此事件来显示上传进度监听函数参数
    uploader.bind('UploadProgress', function (uploader, file) {
        //uploader为当前的plupload实例对象,file为触发此事件的文件对象
        console.log(file.id,file.name,file.percent);
    });

    //当队列中的某一个文件上传完成后触发监听函数参数
    uploader.bind("FileUploaded",function (uploader,file,responseObject) {
        //uploader为当前的plupload实例对象,file为触发此事件的文件对象,responseObject为服务器返回的信息对象,它有以下3个属性:
        //response:服务器返回的文本
        //responseHeaders:服务器返回的头信息
        //status:服务器返回的http状态码,比如200
        console.log("上传完成",uploader,file,responseObject);
    });

script>
body>
html>

file对象的相关属性

属性/方法 描述
id 文件id
name 文件名,例如”myfile.gif”
type 文件类型,例如”image/jpeg”
size 文件大小,单位为字节,当启用了客户端压缩功能后,该值可能会改变
origSize 文件的原始大小,单位为字节
loaded 文件已上传部分的大小,单位为字节
percent 文件已上传部分所占的百分比,如50就代表已上传了50%
status 文件的状态,可能为以下几个值之一:plupload.QUEUED, plupload.UPLOADING, plupload.FAILED, plupload.DONE
lastModifiedDate 文件最后修改的时间
getNative() 获取原生的文件对象
getSource() 获取mOxie.File 对象,想了解mOxie是什么东西,可以看下https://github.com/moxiecode/moxie/wiki/API
destroy() 销毁文件对象

你可能感兴趣的:(js插件)