Dropzonejs + php 实现大文件分段上传

关于Dropzone的安装 以及 初始化,大家可参考:https://segmentfault.com/a/1190000004045240 

首先,js的代码:

 

function initDropzone(dropzone_id){
	Dropzone.autoDiscover = false;// 抑制Uncaught Error: Dropzone already attached.错误
	// 文件上传
	var dropzone = new Dropzone('#' + dropzone_id,{
	    previewTemplate: document.querySelector('#preview-template').innerHTML,
        url: "/contributes/fileUpload",
        paramName: "file",
        addRemoveLinks: true,
        dictRemoveFile: '',
        dictCancelUpload: "
", dictMaxFilesExceeded: '最大' + allowedMaxFiles[aspSelected] + '枚の画像をアップロードできます。', autoProcessQueue:true, uploadMultiple:false, //开启分段上传的话,这个配置项要设为false clickable:true, maxFiles: 9, //最多可以传多少个文件 maxFilesize: 4096, // MB parallelUploads: 1, // 同时上传多少张 chunking: true, // 开启分段上传 chunkSize: 1048576000,//每次分段的size,单位byte,1024*1024*1000=104857600, timeout: 300000, acceptedFiles: "image/*,.mp4,.MOV,.wmv", params: function (files, xhr, chunk) { // 此处拼装分段上传时参数,会伴随每个分段请求post过去 if (chunk) { return { dzUuid: chunk.file.upload.uuid, // 当前上传文件的uuid dzChunkIndex: chunk.index,// 第几个片段 dzTotalFileSize: chunk.file.size,// 文件总size dzCurrentChunkSize: chunk.dataBlock.data.size, // 当前片段的size dzTotalChunkCount: chunk.file.upload.totalChunkCount, // 总共分几段上传 dzChunkByteOffset: chunk.index * this.options.chunkSize, // dzChunkSize: this.options.chunkSize, dzFilename: chunk.file.name }; } }, init: function() { this.on("addedfile", function(file) { // 添加文件的时候想进行的操作 }); this.on("removedfile", function(removedfile) { // 删除文件时的操作 }); this.on("success", function(data) { // 一个文件上传成功后的操作 }); this.on("error", function(file, message) { alert(message); this.removeFile(file); }); this.on("complete", function(file) { // 文件上传完成后的操作 }); this.on("processing", function(file) { }); this.on("uploadprogress", function(progress,p2) { }); this.on("totaluploadprogress", function(p1, p2, p3) { }); this.on("sending", function(file) { }); this.on("queuecomplete", function(progress) { }); } }); }

 后台php的

/**
	 * 上传文件
	 * */
public function fileUpload(){
	$this->autoRender = false;
	// 调用开始日志
	$this->saveOperateFileLog(REQUEST_START);	
	if ($this->request->is( "post" )) {
		try {
			$fileArray = array();
			$chunksInfo = $_POST;
			if($chunksInfo){
				$dzUuid = $chunksInfo['dzUuid'];
				$dzChunkIndex = $chunksInfo['dzChunkIndex'];
				$dzTotalChunkCount = $chunksInfo['dzTotalChunkCount'];
				$dzFilename = $chunksInfo['dzFilename'];
				$ext = strrchr($dzFilename,'.');
				$uuid = $dzUuid;
				$moveToPath = TOUKOU_IMG_PATH.$uuid.$dzChunkIndex.$ext;
				if(Environment::isTest()){
					$moveToPath = TEST_TOUKOU_IMG_PATH.$uuid.$dzChunkIndex.$ext;
				}
				move_uploaded_file($_FILES['file']['tmp_name'], $moveToPath);
				// 当是最后一个片段时,合并
				if($dzChunkIndex == ($dzTotalChunkCount - 1)){
					$mergeFile = TOUKOU_IMG_PATH.$uuid.$ext;
					if(Environment::isTest()){
						$mergeFile = TEST_TOUKOU_IMG_PATH.$uuid.$ext;
					}
					$fp = fopen($mergeFile, "ab");
					for($i=0; $i<$dzTotalChunkCount; $i++){
						$chunkFilePath = TOUKOU_IMG_PATH.$uuid.$i.$ext;
						if(Environment::isTest()){
							$chunkFilePath = TEST_TOUKOU_IMG_PATH.$uuid.$i.$ext;
						}
						$handle = fopen($chunkFilePath,"rb");
						fwrite($fp, fread($handle, filesize($chunkFilePath)));
						fclose($handle);
						unset($handle);
						unlink($chunkFilePath);//合并完毕的文件就删除
					}
					fclose($fp);
					unset($fp);
					array_push($fileArray,array(
							'FILE_CD'    =>   Sanitize::html($uuid.$ext)
							,'FILE_NM'    =>    Sanitize::html($_FILES['file']['name'])
					));
				}
			}else{
				$ext = strrchr($_FILES['file']['name'],'.');
				$uuid = $this->uuid();
				$moveToPath = TOUKOU_IMG_PATH.$uuid.$ext;
				if(Environment::isTest()){
					$moveToPath = TEST_TOUKOU_IMG_PATH.$uuid.$ext;
				}
				move_uploaded_file($_FILES['file']['tmp_name'], $moveToPath);
				array_push($fileArray,
					array('FILE_CD'    =>   Sanitize::html($uuid.$ext)
						,'FILE_NM'    =>    Sanitize::html($_FILES['file']['name'])
				));
			}
			$this->renderResponse($this, json_encode($fileArray, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES));	
			// 调用结束日志
			$this->saveOperateFileLog(REQUEST_END);
		}catch (Exception $ex){
			// 调用异常日志
			$this->saveOperateFileLog(REQUEST_ERR, $ex->getMessage());
			throw $ex;
		}
	}
}

 

你可能感兴趣的:(PHP,JS)