Question

我正在开发一个项目并开始使用dropzone.js，然后被转移到另一个任务，当我回到这个任务时，一位前同事做了一些修改..

它的问题很简单，但我需要学习 - 他创建了一些我不想要的表格，我只是希望能够通过css显示我创建和控制的项目的VAR数据。

我的问题是，我迷失了如何使用他的功能并使它们更基于“html”，所以我可以将我的CSS分配给它。

我正在尝试使用dropzone.js并希望像本页这样的布局dropzonejs.com或者这个使用DropzoneJS

    <script>
var files = [];
var total_count = 0;
var processing = false;
function deleteFile(fileid) {
	var file = files[fileid];
	total_count -= file.count;
	files[fileid] = null;
	document.getElementById('dr_total').innerHTML = total_count;
	var row = document.getElementById('dr_'+fileid);
	row.parentNode.removeChild(row);
	dz_deleteRemoteFile(file.file);
}
function checkout() {
	if (processing) {
		return true;	
	}
	
	if (files.length < 1) {
		alert('Please upload files');
		return false;	
	}
	processing = true;
	document.getElementById('btnCheckout').innerHTML = 'Processing...';
	var result = dz_addOrder();
	if (!result) {
		document.getElementById('btnCheckout').innerHTML = 'Checkout';
		processing = false;	
	}
}
</script>

<script language="javascript" src="dropzone.js"></script>
<script>
Dropzone.options.myDropzone = {
  paramName: "file", // The name that will be used to transfer the file
  maxFilesize: 200, // MB
  //acceptedFiles: "application/csv,text/csv,application/vnd.ms-excel",
  clickabke: false,
  dictDefaultMessage: 'Drag or Select files to Upload',
  method: "POST",
  uploadMultiple: false,
  accept: function(file, done) {
	  if (file.name.substring(file.name.length-3).toLowerCase() != 'csv') {
		  done('ERROR: Invalid file type, only CSV files allowed.');
	  } else {
	  	done();
	  }
  },
  error: function(file, errorMessage, xhr) {
	  	alert('ERROR: '+file.name+' '+errorMessage);
  },
  success: function(file, message) {
		var ret = JSON.parse(message);
		if (ret.status == "ERROR") {
			alert('ERROR: '+file.name+' '+ret.message);
			return false;	
		}
		var obj = {
			file:ret.file,
			name:file.name,
			count:ret.count
		};
		files.push(obj);
		total_count += ret.count;
		var table = document.getElementById('dr_files');
		var row = table.insertRow(-1);
		row.id = 'dr_'+(files.length-1);
		row.insertCell(0).innerHTML = file.name;
		row.insertCell(1).innerHTML = ret.count;
		row.insertCell(2).innerHTML = '<button class="verifybuttonred" onclick="deleteFile('+(files.length-1)+')">delete</button>';
		
		document.getElementById('dr_total').innerHTML = total_count;
		
		var dz = this;
		setTimeout(function(){
			dz.removeFile(file);
		},1000,dz);
  }
};
</script>

<link rel="stylesheet" type="text/css" href="basic.css">
<link rel="stylesheet" type="text/css" href="dropzone.css">

<body>
<form action="data_hygiene/upload.php" id="myDropzone" class="dropzone" enctype="multipart/form-data" method="post">
<input type="hidden" name="clientid" id="clientid" value="0">
</form>
<div id="dr_filelist">
<br/><br/><br/><table border="1" cellpadding="5" cellspacing="5" bordercolor="#000000" width="100%" id="dr_files">
	<tr><th width="70%">File</th><th width="15%">Count</th><th width="15%">Options</th></tr>
    <tr><td></td><td></td><td></td></tr>
</table>
<table border="1" cellpadding="5" cellspacing="5" bordercolor="#000000" width="100%" id="dr_files">
	<tr><th width="70%">Total</th><th width="15%"><div id="dr_total"></div></th><th width="15%"><button class="buttongreen" id="btnCheckout" onClick="checkout();">Checkout</button></th></tr>
</table>

所以你将在接近结束时，他有：

		var table = document.getElementById('dr_files');
		var row = table.insertRow(-1);
		row.id = 'dr_'+(files.length-1);
		row.insertCell(0).innerHTML = file.name;
		row.insertCell(1).innerHTML = ret.count;
		row.insertCell(2).innerHTML = '<button class="verifybuttonred" onclick="deleteFile('+(files.length-1)+')">delete</button>';

这就是我想要从TABLE布局中删除...

这就是它目前的样子 - （这是垃圾） enter image description here

如何解决此dropzone.js布局问题

0 个答案: