Web文件上传模块 Plupload

Plupload 是一个Web浏览器上的界面友好的文件上传模块,可显示上传进度、图像自动缩略和上传分块。可同时上传多个文件。

示例代码:

<!-- Load Queue widget CSS and jQuery -->

<style type="text/css">@import url(css/plupload.queue.css);</style>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript">

    google.load("jquery", "1.3");

</script>

<!-- Thirdparty intialization scripts, needed for the Google Gears and BrowserPlus runtimes -->

<script type="text/javascript" src="/plupload/js/gears_init.js"></script>

<script type="text/javascript" src="http://bp.yahooapis.com/2.4.21/browserplus-min.js"></script>

<!-- Load plupload and all it‘s runtimes and finally the jQuery queue widget -->

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

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

<script type="text/javascript">

// Convert divs to queue widgets when the DOM is ready

$().ready(function() {

    $("#uploader").pluploadQueue({

        // General settings

        runtimes : ‘gears,flash,silverlight,browserplus,html5‘,

        url : ‘upload.php‘,

        max_file_size : ‘10mb‘,

        chunk_size : ‘1mb‘,

        unique_names : true,

        // Resize images on clientside if we can

        resize : {width : 320, height : 240, quality : 90},

        // Specify what files to browse for

        filters : [

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

            {title : "Zip files", extensions : "zip"}

        ],

        // Flash settings

        flash_swf_url : ‘/plupload/js/plupload.flash.swf‘,

        // Silverlight settings

        silverlight_xap_url : ‘/plupload/js/plupload.silverlight.xap‘

    });

    // Client side form validation

    $(‘form‘).submit(function(e) {

        var uploader = $(‘#uploader‘).pluploadQueue();

        // Validate number of uploaded files

        if (uploader.total.uploaded == 0) {

            // Files in queue upload them first

            if (uploader.files.length > 0) {

                // When all files are uploaded submit form

                uploader.bind(‘UploadProgress‘, function() {

                    if (uploader.total.uploaded == uploader.files.length)

                        $(‘form‘).submit();

                });

                uploader.start();

            } else

                alert(‘You must at least upload one file.‘);

            e.preventDefault();

        }

    });

});

</script>

...

<form ..>

    <div id="uploader">

        <p>You browser doesn‘t have Flash, Silverlight, Gears, BrowserPlus or HTML5 support.</p>

    </div>

</form>

时间: 2024-08-25 14:41:44

Web文件上传模块 Plupload的相关文章

web 文件上传组件 Plupload

Plupload官网:点击打开链接   建议下载最新版本,低版本会出现浏览器兼容问题. 最近公司有个项目需要在web端使用多文件上传功能,刚开始准备使用HTML5来做,但是IE9以下是都不支持的,于是想到了flash,在网上搜了下各种开源的组件,最后决定使用Plupload,下面来介绍一下该组件使用时遇到的一些问题以及解决方案. 先贴出配置参数: <script type="text/javascript"> // Initialize the widget when th

web文件上传大小限制

最近在项目中遇到上传文件,对上传文件的大小需要进行限制,这里学习和整理了一下一些常规的文件大小限制的方法. 一般分为两种方式,一种是服务器端判断文件大小进行限制,这种方法的存在明显的缺陷,当用户过多后,数据上传到服务器之后,在对其进行监测,大大增加了宽带和服务器的压力. 另一种是放在前端进行大小监测, 这种方式提前进行监测,可以有效减小服务器的压力. 当上传的文件过大之后,可以使用百度开发的文件上传插件 WebUploader,或者另一个文件上传插件Plupload. 下面分别介绍两种方式: #

Web文件上传原理

采用WEB技术实现B/S(浏览器/服务器)结构的管理系统是办公自动化的发展趋势.基于WEB技术的管理系统,由于开发周期短:与用户平台无关:易于实现交互式应用:能对信息进行快速.高效的收集.处理和发布,近几年来得到了迅速发展.而ASP技术由于其开发效率高.交互性好,安全性强等特点,逐渐成为开发管理系统的首选工具. 许多基于WEB的应用都涉及文件上传操作.常见的文件上传技术有:基于HTTP协议的:基于VB(或DELPHI等编程语言)开发的文件上传组件的:基于数据库技术的等等.这些方法一般都需要编程者

Java Web文件上传

一. Java Web文件上传需要借助一些第三方库,常用的是借助Apache的包,有两个: commons-fileupload commons-io 二.前端代码示例: <form method="post" id="uploadApkForm" action="uploadapk" enctype="multipart/form-data"> <p> 文件:<input name="

WEB文件上传下载过程简介(基于Struts2)

WEB文件上传过程简介(基于Struts2),页面上传.Action收取.解析:文件导出 文件处理过程,需要注意对文件的定期清理,避免磁盘占用过多: 1. jsp页面:   <s:file required="true" name ="myFile" theme="zx2"/> <s:form action ="myfile.action" name="form" method =&quo

C#实现Web文件上传的两种方法

1. C#实现Web文件的上传 在Web编程中,我们常需要把一些本地文件上传到Web服务器上,上传后,用户可以通过浏览器方便地浏览这些文件,应用十分广泛. 那么使用C#如何实现文件上传的功能呢?下面笔者简要介绍一下. 首先,在你的Visual C# web project 中增加一个上传用的Web Form,为了要上传文件,需要在ToolBox中选择HTML类的File Field控件,将此控件加入到Web Form中,然而此时该控件还不是服务端控件,我们需要为它加上如下一段代码:<input

java web 文件上传下载

文件上传下载案例: 首先是此案例工程的目录结构: 处理上传: FileUploadServlet.java 1 package fnz.fileUploadTest; 2 3 import java.io.File; 4 import java.io.IOException; 5 import java.io.InputStream; 6 import java.io.PrintWriter; 7 import java.text.SimpleDateFormat; 8 import java.

多图片/文件上传 - SwfUpload/PlUpload

<文件上传利器SWFUpload使用指南> <前端上传组件Plupload使用指南>

web文件上传

文件上传的步骤: 1.目前Java文件上传功能都是依靠Apache组织的commons-io, fileupload两个包来实现的: 2. http://commons.apache.org/下载io,fileupload包 添加到项目中的WEB-INF/lib文件夹下: 3.文件上传的时候文件一般是存在服务器的upload目录下,文件名称 存储在数据库中,为了防止上传的文件同名,我们需要动态的 修改上传文件的名称.  4.必须设计form表单类型为(请求方式为:post请求,添加属性encty