[JS] Dropzone JS Event

Table of Contents

Dropzone JS là một thư viện dùng để upload file, có hỗ trợ kéo thả, upload multi file Sau đây là một số sự kiện (event) chúng ta có thể bắt được khi sử dụng Dropzone. Chúng ta có form upload như sau:

<form action="uploadprocess.php" class="dropzone" id="MyDropzone"></form>
Sau đây là script cấu hình MyDropzone
Dropzone.options.MyDropzone = {
    autoProcessQueue : true,
	addRemoveLinks: true,
	removedfile: function(file) {
		var name = file.name;
		$.ajax({
			type: 'GET',
			url: 'delete.php',
			data: "id="+name,
			dataType: 'html'
		});
		var _ref;
		return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
	},
    dictDefaultMessage: "Drop files or click here to upload a new DICOM series ...",
    init : function() {
        myDropzone = this;
        //Restore initial message when queue has been completed
        this.on("drop", function(event) {
            console.log(myDropzone.files);
        });
		this.on("complete", function (file) {
			if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0) {
				console.log('hahaha');
			}
		});
		this.on("success", function(file, responseText) {
            console.log(responseText);
        });
    }
};
Form upload chúng ta sẽ trỏ đến file uploadprocess.php, file này có nhiệm vụ xử lý việc upload file. Trong này tôi có cho up file zip, do vậy sẽ có kiểm tra file up lên phải file nén không, nếu đúng thì giải nén (bạn có thể xem thêm ở bài này về check magic number của file)
function isRarOrZip($file) {
    // get the first 7 bytes
    $bytes = file_get_contents($file, FALSE, NULL, 0, 7);
    $ext = strtolower(substr($file, - 4));
    // RAR magic number: Rar!\x1A\x07\x00
    // http://en.wikipedia.org/wiki/RAR
    if ($ext == '.rar' and bin2hex($bytes) == '526172211a0700') {
        return TRUE;
    }
    // ZIP magic number: none, though PK\003\004, PK\005\006 (empty archive),
    // or PK\007\008 (spanned archive) are common.
    // http://en.wikipedia.org/wiki/ZIP_(file_format)
    if ($ext == '.zip' and substr($bytes, 0, 2) == 'PK') {
        return TRUE;
    }
    return FALSE;
}
$ds = DIRECTORY_SEPARATOR;
$foldername = "../../uploads";
$diroot=$_SERVER['DOCUMENT_ROOT'].'/';
$webfol='dtcs2017/';
if (!empty($_FILES)) {
	$fileupload = basename( $_FILES['file']['name']);
	$namefile=explode('.',$fileupload)[0];
	$fileType = $_FILES['file']['type'];
	$fileSize = $_FILES['file']['size'];
	$tempFile = $_FILES['file']['tmp_name'];
	$targetPath = dirname( __FILE__ ) . $ds. $foldername . $ds;
	$targetFile =  $targetPath. $fileupload;
	move_uploaded_file($tempFile,$targetFile);
	if(isRarOrZip($targetFile)){
		$zip = new ZipArchive;
		$res = $zip->open($targetFile);
		if ($res === TRUE) {
		  $zip->extractTo($foldername.'/'.$namefile);
		  $zip->close();
		  echo 'done!';
		} else {
		  echo 'error!';
		}
		unlink($targetFile);
		$dirapp=$diroot.$webfol.'uploads/';
		$prefixname=$namefile.'_'.date("dmYgisa");
		$fullpathzip=$dirapp.$namefile;
		$dirname=$dirapp.$prefixname;
		rename($fullpathzip,$dirname);
	}
}
echo 'hahahaahahahahahahahaha';
Trong script chúng ta còn gọi ajax đến file delete.php, file này có chức năng xóa file có id được truyền vào.
$foldername = '............/uploads/';
$filename = $_REQUEST['id'];
unlink($foldername.$filename);
Đây chỉ là note của tôi. Dành nhắc nhớ cho tôi. Nếu giúp được bạn nào đang gặp khó khăn như tôi đã từng thì tôi rất vui!^^ Trong khi tìm hiểu, tôi có tham khảo ở:
https://stackoverflow.com/questions/19390471/dropzonejs-how-to-get-php-response-after-upload-success
--soiqualang.chentreu]]>

Leave a Reply

Your email address will not be published. Required fields are marked *