plupload文件上传 _上传文件

plupload文件上传

plupload 是一个强大的 HTML5/Flash/Silverlight 多文件上传库，它能够提供稳定的跨浏览器文件上传功能，它支持拖放、多个文件选择以及图片的缩放和预览等特性，下面将详细介绍 plupload 的配置和使用。

初始化配置

在使用 plupload 之前，需要进行一些基本的配置，这包括指定上传的 URL、定义文件类型、大小限制等，以下是一个初始化配置的例子：

var uploader = new plupload.Uploader({
    // 必填项，指定服务器端的上传接口URL
    url: 'upload.php',
    // 文件过滤器，只允许上传图片文件
    filters: {
        max_file_size: '10mb', // 文件大小限制
        mime_types: [ // 允许的文件类型
            {title: "Image files", extensions: "jpg,gif,png"},
            {title: "Zip archives", extensions: "zip"}
        ]
    },
    // Flash运行时的选项
    flash_swf_url: '/js/plupload/plupload.flash.swf',
    // Silverlight运行时的选项
    silverlight_xap_url: '/js/plupload/plupload.silverlight.xap'
});

事件绑定

在配置完成后，需要绑定相应的事件来处理文件上传的不同阶段，可以监听 FilesAdded 事件来处理文件添加后的逻辑，或者监听 UploadProgress 事件来显示上传进度。

uploader.bind('FilesAdded', function(up, files) {
    // 当文件被添加到上传队列时触发
    plupload.each(files, function(file) {
        // 这里可以执行文件添加后的一些操作，比如预览图片
    });
});
uploader.bind('UploadProgress', function(up, file) {
    // 文件上传过程中触发，可以用来更新进度条
    var progress = file.percent + "%";
    $('#progress').text(progress);
});

启动上传

配置完事件后，就可以启动上传了，通常我们会在用户点击某个按钮时开始上传。

$('#startupload').on('click', function() {
    uploader.start(); // 开始上传队列中的文件
    return false;
});

高级特性

plupload 还提供了许多高级特性，如分块上传、图片水印、客户端图片处理等，这些特性可以根据项目需求进行选择和配置。

安全性考虑

在使用 plupload 时，还需要考虑上传的安全性问题，比如防止未授权的文件上传、检查文件内容的安全性等，通常，服务端也需要做相应的安全措施。

相关问答FAQs

Q1: plupload支持哪些运行环境？

A1: plupload 支持多种运行环境，包括 HTML5、Flash、Silverlight 和 HTML4，它通过检测用户的浏览器来决定使用哪种技术进行文件上传，它可以兼容绝大多数现代浏览器。

Q2: 如何限制用户只能上传特定类型的文件？

A2: 你可以通过设置 filters 选项来限制上传文件的类型和大小，如果你只想让用户上传图片文件，可以这样设置：

filters: [
    {title: "Image files", extensions: "jpg,gif,png"}
],

这将只允许扩展名为 jpg、gif 或 png 的文件被上传。