关于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;
}
}
}