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

最新推荐文章于 2024-04-24 01:09:50 发布

暮志未晚NAN

最新推荐文章于 2024-04-24 01:09:50 发布

阅读量7k

点赞数 2

分类专栏： js插件文章标签：插件 javascript 文件上传

本文链接：https://blog.csdn.net/qq_30100043/article/details/78491993

版权

js插件专栏收录该内容

4 篇文章 0 订阅

订阅专栏

案例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Plupload使用指南</title>
    <!-- 首先需要引入plupload的源代码 -->
    <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()	销毁文件对象

暮志未晚NAN

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
使用PlupLoad js插件进行文件上传案例

案例代码<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Plupload使用指南</title>  <script src="js/plupload.full.min.js"></script></head><body><p> <
复制链接

扫一扫