Voor het uploaden van afbeeldingen in een cakephp-project heb ik java-script gebruikt. Ik heb dit js-bestand toegevoegd in app\View\Layouts default.ctp
js-code
document.querySelector('input[type=file]').addEventListener('change', function(event){
var files = event.target.files;
for (var i = 0; i < files.length; i++) {
if (files[i].type.match(/image.*/)) {
var reader = new FileReader();
reader.onload = function (readerEvent) {
var image = new Image();
image.onload = function (imageEvent) {
var imageElement = document.createElement('div');
imageElement.classList.add('uploading');
imageElement.innerHTML = '<span class="progress"><span></span></span>';
var progressElement = imageElement.querySelector('span.progress span');
progressElement.style.width = 0;
document.querySelector('form div.photos').appendChild(imageElement);
var canvas = document.createElement('canvas'),
max_size = 1200,
width = image.width,
height = image.height;
if (width > height) {
if (width > max_size) {
height *= max_size / width;
width = max_size;
}
} else {
if (height > max_size) {
width *= max_size / height;
height = max_size;
}
}
canvas.width = width;
canvas.height = height;
canvas.getContext('2d').drawImage(image, 0, 0, width, height);
var xhr = new XMLHttpRequest();
if (xhr.upload) {
// Update progress
xhr.upload.addEventListener('progress', function(event) {
var percent = parseInt(event.loaded / event.total * 100);
progressElement.style.width = percent+'%';
}, false);
xhr.onreadystatechange = function(event) {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
imageElement.classList.remove('uploading');
imageElement.classList.add('uploaded');
imageElement.style.backgroundImage = 'url('+xhr.responseText+')';
console.log('Image uploaded: '+xhr.responseText);
} else {
imageElement.parentNode.removeChild(imageElement);
}
}
}
xhr.open('post', 'process.php', true);
xhr.send(canvas.toDataURL('image/jpeg'));
}
}
image.src = readerEvent.target.result;
}
reader.readAsDataURL(files[i]);
}
}
event.target.value = '';
Ik heb gecontroleerd of er geen probleem is.
nu in add.ctp bestand I adder
<input type="file" multiple />
In de uitvoer zie ik het veld voor het bestandstype. Toen ik nu op dit veld klikte en een afbeelding uploadde, gaf de mojila-bug me een foutmelding. Dat is
document.querySelector(…) is een null-fout
Ik heb geen idee van deze fout. Waarom hier zeggen dat queryselector null is?
Antwoord 1, autoriteit 100%
document.querySelector()gedraagt zich op dezelfde manier als de jQuery.(document).ready()methode. Wanneer de DOM gereed is, retourneert de selector het object.
Ik raad je aan om alle JS-scripts onderaan de pagina te bellen.
Antwoord 2, autoriteit 23%
Om er zeker van te zijn dat je DOM klaar is, kun je dit toevoegen aan je JS-bestand.
// my-script.js
document.addEventListener("DOMContentLoaded", function() {
// this function runs when the DOM is ready, i.e. when the document has been parsed
document.querySelector('input[type=file]')
.addEventListener('change', function(event){
...
}
});
Op deze manier kunt u uw js-bestanden oproepen waar u maar wilt. Bekijk dit uitstekende antwoordvoor meer inzicht in deze zaken.
Bekijk ook deze andere Google-regel.
Antwoord 3, autoriteit 3%
Ik raad aan om je <script type="text/javascript" src="your js file"></script>in de body te schrijven, vóór de afsluitende tag
Antwoord 4, autoriteit 3%
file.js
const heading1 = document.querySelector(".heading1");
console.log(heading1);
Oplossing 1
Gebruik defer(beste en aanbevolen manier):
<!DOCTYPE html>
<html lang="en">
<head>
<script src="./file.js" defer></script>
<title>Document</title>
</head>
<body>
<h1 class="heading1">Hello World 1</h1>
</body>
</html>
Oplossing 2
Plaats uw JavaScript onderaan voordat u de body-tag
closing sluit
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h1 class="heading1">Hello World 1</h1>
<script src="./file.js"></script>
</body>
</html>
Antwoord 5, autoriteit 2%
Er is nu een andere “betere” manier om dit probleem aan te pakken.
zet je scripts in de head-tag en voeg het defer-attribuut toe.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script src="main.js" defer></script>
</head>
<body>
yoyoyo
</body>
</html>
u kunt er hier meer over lezen en hier
TLDR (kan onnauwkeurig en misleidend zijn, dus lees de bronnen hierboven!):
het defer-attribuut vertelt de browser om het bestand te laden, maar wacht met de uitvoering totdat de dom klaar is, wat dicht in de buurt komt van het gedrag dat je impliciet krijgt als je de scripttag onderaan de body-tag plaatst, met het verschil dat in de op de oude manier moet je wachten tot de hele body-tag is geparseerd totdat je begint met het downloaden van de scripttag.
Antwoord 6
Ik kwam dit probleem tegen waar ik probeerde te doen (voor de eenvoud afgeslankt):
<script type="text/javascript">
var svg = document.querySelector('svg');
console.log(svg);
</script>
op een element in de <body>:
<svg id="svg" viewBox="0 0 120 120" width="500px" height="500px"></svg>
Toen ik jQuery had toegevoegd en mijn regels in een $(document).ready()had geplaatst, ging het goed:
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var svg = document.querySelector('svg');
console.log(svg);
});
</script>