`

多附件上传控件plupload的使用心得

 
阅读更多
http://www.cnblogs.com/luckybird/archive/2013/01/15/2861072.html

官方例子:http://www.plupload.com/examples/runtimes

中文文档:http://www.cnblogs.com/God-Shell/articles/3209708.html


官方的源码好像不能用,就打开例子页面,从例子拿到几个js,见附件:


官方说:要想获得服务器在上传完成后,返回的信息,就使jquery.plupload.queue.js
                var uploader = $("#" + obj.divId).pluploadQueue();
                uploader.bind('FileUploaded', function (up, files, response) {
                    response//这个就是服务器返回的信息
                });


cakephp:
echo $this->Html->css("/js/plugins/plupload/js/jquery.ui.plupload/css/jquery.ui.plupload");
    echo $this->Html->css("/js/plugins/plupload/js/jquery.plupload.queue/css/jquery.plupload.queue");
    echo $this->Html->script("plugins/plupload/browserplus-min");
    echo $this->Html->script("plugins/plupload/plupload.full");
    echo $this->Html->script("plugins/plupload/jquery.plupload.queue");
    echo $this->Html->script("plugins/plupload/js/i18n/zh_CN");


                        <div id="uploader">
                            <p>Your browser doesn't have Flash, Silverlight or HTML5 support.</p>
                        </div>


$("#uploader").pluploadQueue({
            // General settings
            runtimes : 'html5',
            url : "/Admin/upload",
            chunk_size : '1mb',
            unique_names : true,

            filters : {
                max_file_size : '10mb',
                mime_types: [
                    {title : "Image files", extensions : "jpg,gif,png"},
                    {title : "Zip files", extensions : "zip"}
                ]
            },

            // Resize images on clientside if we can
            resize : {width : 320, height : 240, quality : 90},
            flash_swf_url: '/js/plugins/upload/plupload.flash.swf',
            silverlight_xap_url: '/js/plugins/upload/plupload.silverlight.xap'
        });
        var uploader= $("#uploader").pluploadQueue();
        uploader.bind('FileUploaded', function (up, files, response) {
            alert($.toJSON(response));
        });



两个后台接受文件
Java:
@ResponseBody
    @RequestMapping(value = "/up", method = RequestMethod.POST)
    public Object uploadFile(HttpServletRequest request, HttpServletResponse response) throws Exception {

        /*Map map = new HashMap();
        Enumeration paramNames = request.getParameterNames();
        while (paramNames.hasMoreElements()) {
            String paramName = (String) paramNames.nextElement();

            String[] paramValues = request.getParameterValues(paramName);
            if (paramValues.length == 1) {
                String paramValue = paramValues[0];
                if (paramValue.length() != 0) {
                    System.out.println("参数:" + paramName + "=" + paramValue);
                    map.put(paramName, paramValue);
                }
            }
        }*/


        Map<String, Object> result = new HashMap<String, Object>();
        Map<String, Object> fileInfo = new HashMap<String, Object>();
        Map<String, Object> feedback = new HashMap<String, Object>();
        MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
        MultipartFile file = multipartRequest.getFile("file");
        String filename = request.getParameter("name");
        File outFile = null;
        FileOutputStream fos = null;
        // 获得输入流:
        try {
            byte[] b = file.getBytes();
            outFile = Directory.createTemplate();
            fileInfo.put("clientFileName", filename);
            log.debug(outFile.getName() + ":" + EncDecUtils.encodeBase64(outFile.getName()));
            fileInfo.put("serverFileName", EncDecUtils.encodeBase64(outFile.getName()));
            result.put("fileInfo", fileInfo);

            fos = new FileOutputStream(outFile);
            fos.write(b);
            log.debug("上传文件成功,名字:{},{}", new Object[]{filename, outFile.getAbsoluteFile()});
        } catch (IOException e) {
            feedback.put("message", "上传出现错误");
            feedback.put("success", false);
            result.put("feedback", feedback);
            result.put("serverStatus", "500");
            //log.debug(JSONUtils.bean2str(result));
            log.debug("上传出现异常:{}" + e);
            return result;
        } finally {
            if (fos != null) fos.close();
        }
        feedback.put("message", "上传成功.");
        feedback.put("success", true);
        result.put("feedback", feedback);
        result.put("serverStatus", "200");
        log.debug(JSONUtils.bean2str(result));
        return result;

    }




PHP:
<?php
/**
 * upload.php
 *
 * Copyright 2013, Moxiecode Systems AB
 * Released under GPL License.
 *
 * License: http://www.plupload.com/license
 * Contributing: http://www.plupload.com/contributing
 */

#!! IMPORTANT: 
#!! this file is just an example, it doesn't incorporate any security checks and 
#!! is not recommended to be used in production environment as it is. Be sure to 
#!! revise it and customize to your needs.


// Make sure file is not cached (as it happens for example on iOS devices)
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

/* 
// Support CORS
header("Access-Control-Allow-Origin: *");
// other CORS headers if any...
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
	exit; // finish preflight CORS requests here
}
*/

// 5 minutes execution time
@set_time_limit(5 * 60);

// Uncomment this one to fake upload time
// usleep(5000);

// Settings
$targetDir = ini_get("upload_tmp_dir") . DIRECTORY_SEPARATOR . "plupload";
//$targetDir = 'uploads';
$cleanupTargetDir = true; // Remove old files
$maxFileAge = 5 * 3600; // Temp file age in seconds


// Create target dir
if (!file_exists($targetDir)) {
	@mkdir($targetDir);
}

// Get a file name
if (isset($_REQUEST["name"])) {
	$fileName = $_REQUEST["name"];
} elseif (!empty($_FILES)) {
	$fileName = $_FILES["file"]["name"];
} else {
	$fileName = uniqid("file_");
}

$filePath = $targetDir . DIRECTORY_SEPARATOR . $fileName;

// Chunking might be enabled
$chunk = isset($_REQUEST["chunk"]) ? intval($_REQUEST["chunk"]) : 0;
$chunks = isset($_REQUEST["chunks"]) ? intval($_REQUEST["chunks"]) : 0;


// Remove old temp files	
if ($cleanupTargetDir) {
	if (!is_dir($targetDir) || !$dir = opendir($targetDir)) {
		die('{"jsonrpc" : "2.0", "error" : {"code": 100, "message": "Failed to open temp directory."}, "id" : "id"}');
	}

	while (($file = readdir($dir)) !== false) {
		$tmpfilePath = $targetDir . DIRECTORY_SEPARATOR . $file;

		// If temp file is current file proceed to the next
		if ($tmpfilePath == "{$filePath}.part") {
			continue;
		}

		// Remove temp file if it is older than the max age and is not the current file
		if (preg_match('/\.part$/', $file) && (filemtime($tmpfilePath) < time() - $maxFileAge)) {
			@unlink($tmpfilePath);
		}
	}
	closedir($dir);
}	


// Open temp file
if (!$out = @fopen("{$filePath}.part", $chunks ? "ab" : "wb")) {
	die('{"jsonrpc" : "2.0", "error" : {"code": 102, "message": "Failed to open output stream."}, "id" : "id"}');
}

if (!empty($_FILES)) {
	if ($_FILES["file"]["error"] || !is_uploaded_file($_FILES["file"]["tmp_name"])) {
		die('{"jsonrpc" : "2.0", "error" : {"code": 103, "message": "Failed to move uploaded file."}, "id" : "id"}');
	}

	// Read binary input stream and append it to temp file
	if (!$in = @fopen($_FILES["file"]["tmp_name"], "rb")) {
		die('{"jsonrpc" : "2.0", "error" : {"code": 101, "message": "Failed to open input stream."}, "id" : "id"}');
	}
} else {	
	if (!$in = @fopen("php://input", "rb")) {
		die('{"jsonrpc" : "2.0", "error" : {"code": 101, "message": "Failed to open input stream."}, "id" : "id"}');
	}
}

while ($buff = fread($in, 4096)) {
	fwrite($out, $buff);
}

@fclose($out);
@fclose($in);

// Check if file has been uploaded
if (!$chunks || $chunk == $chunks - 1) {
	// Strip the temp .part suffix off 
	rename("{$filePath}.part", $filePath);
}

// Return Success JSON-RPC response
die('{"jsonrpc" : "2.0", "result" : null, "id" : "id"}');
分享到:
评论

相关推荐

    文件上传控件PlupLoad 的使用

    初始化PlupLoad控件,我们需要在JavaScript中创建一个新的PlupLoad实例,并设置相关配置。以下是一个基本的初始化示例: ```javascript $(document).ready(function() { var uploader = new plupload.Uploader({ ...

    java+plupload多附件上传+分页

    本项目着重讲解如何使用Java后端配合Plupload前端插件实现多附件上传,并结合分页技术进行数据展示。Plupload是一个强大的多浏览器文件上传解决方案,它支持Flash、Silverlight、HTML5等多种技术,确保在各种浏览器...

    plupload 上传组件的使用

    **plupload上传组件详解** plupload是一款强大的JavaScript上传组件,它支持多种浏览器,包括IE6+、Firefox、Chrome、Safari以及Opera等。这个组件以其丰富的功能和良好的跨平台兼容性,深受开发者喜爱。在本文中,...

    Plupload 上传.net MVC 上传示例

    Plupload 是一个强大的多浏览器、多模式的文件上传组件,支持HTML5、Flash、Silverlight和Gears等多种技术实现。在.NET MVC框架中,我们可以利用Plupload来构建用户友好的文件上传功能,提供断点续传、批量上传、...

    多文件上传JQUERY PLUPLOAD

    为了解决这个问题,开发人员通常会采用JavaScript库来实现多文件上传功能,其中JQUERY PLUPLOAD是一个广泛使用的解决方案。 JQUERY PLUPLOAD是一款基于jQuery的多文件上传插件,它提供了强大的文件上传功能,支持...

    java+plupload多附件上传 servelet

    Java与Plupload结合实现多附件上传是一个常见的Web开发任务,主要涉及到前端的文件选择、上传逻辑和后端的文件接收、存储处理。Plupload是一款强大的跨浏览器文件上传组件,支持多种上传方式,如Flash、HTML5、...

    plupload 多文件上传组件

    **plupload多文件上传组件详解** plupload是一款强大的、跨浏览器的多文件上传组件,它支持多种文件上传方式,包括HTML5、Flash、Silverlight和HTML4,确保在不同的浏览器和设备上都能实现稳定可靠的文件上传功能。...

    兼容IE6+的文件上传控件plupload工具包

    plupload是一款强大的跨浏览器文件上传组件,特别针对IE6+浏览器进行了优化,确保在各种浏览器环境下都能提供稳定的文件上传功能。它不仅支持HTML5的先进特性,如拖放上传,同时也为不支持HTML5的浏览器提供了回退...

    批量上传,plupload,asp.net

    综上所述,"批量上传,plupload,asp.net"这个主题涉及到的技术点主要包括文件批量上传的实现、Plupload插件的使用和ASP.NET服务器端的文件处理。理解并掌握这些知识,对于开发高效、稳定且用户友好的文件上传功能至关...

    前端组件 plupload 文件上传demo

    `plupload` 是一个强大的跨浏览器文件上传组件,它支持多线程上传、断点续传、本地预览等功能,能够显著提升用户体验。本文将详细介绍 `plupload` 的使用及其相关知识点。 首先,我们需要了解 `plupload` 的基本...

    多文件上传plupload

    Plupload是一款强大的多文件上传控件,它旨在提供跨浏览器、跨平台的文件上传解决方案,类似于早期的SWFUpload。Plupload以其灵活性、稳定性和丰富的特性集而受到开发者的青睐。 Plupload的核心功能包括: 1. **多...

    Plupload + jquery.plupload.queue 批量上传 和 plupload.full单个上传

    Plupload 是一个强大的多浏览器文件上传组件,支持各种浏览器环境,包括IE6+、Firefox、Chrome、Safari和Opera等。它提供了丰富的功能,如断点续传、多线程上传、进度条显示、文件类型过滤等。在本项目中,结合了 `...

    Plupload多文件上传

    Plupload是一款强大的多文件上传插件,它支持多种浏览器和平台,包括IE6在内的老旧浏览器。这款插件采用JavaScript编写,同时结合HTML5、Flash、Silverlight和HTML4等多种技术,确保在各种环境下都能实现文件的上传...

    Plupload使用.doc

    Plupload 提供了丰富的特性,如上传进度提示、图片预览、多文件同时上传、文件类型过滤和分块上传等。然而,值得注意的是,这些功能在不同的上传模式下可能存在差异,某些可能仅在特定的运行环境中可用。 **引入与...

    plupload+PHP多图片上传

    "plupload+PHP多图片上传" 指的是使用plupload这个JavaScript上传组件结合PHP技术实现的多图片同时上传的功能。plupload是一个强大的文件上传工具,支持多种浏览器和多种上传方式,包括Flash、HTML5、Silverlight等...

    plupload文件批量上传工具

    Plupload是一款强大的、跨平台的文件上传工具,它支持多种浏览器和文件上传方式,包括拖拽上传、多选文件以及批量上传整个文件夹。在Java环境中,我们可以利用Plupload的特性来实现用户友好的文件上传功能,提升用户...

    plupload文件上传

    Plupload 是一个强大的多浏览器文件上传组件,支持多种浏览器和平台,包括IE6+、Firefox、Chrome、Safari以及Opera等。它通过提供多种上传方式(如HTML5、Flash、Silverlight、HTML4的iframe fallback)确保在各种...

    plupload附件上传插件

    plupload是一款强大的文件上传组件,它在Web开发领域被广泛应用,尤其在处理大量或复杂文件上传需求时表现出色。该插件以其灵活性、稳定性和兼容性赢得了开发者们的青睐。它支持多文件同时上传,大大提升了用户在上...

    plupload多文件上传组建

    Plupload是一款强大的多文件上传组件,它旨在提供一个跨浏览器、跨平台的解决方案,使得用户可以方便地实现批量文件上传功能。这个组件以其兼容性广、功能完善而备受开发者青睐,支持多种技术栈,包括Flash、HTML5...

    plupload文件上传工具

    Plupload的核心特性在于其对多文件上传的支持、分块上传的能力以及实时的上传进度反馈,这使得用户能够更高效、更稳定地上传大量或大体积的文件。 1. **多文件选择与上传**:Plupload允许用户一次性选择多个文件...

Global site tag (gtag.js) - Google Analytics