Ali*_*rim 21 javascript cakephp
对于cakephp项目中的图像上传,我使用了java-script.I在app\View\Layouts中添加了这个js文件default.ctp
js代码
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 = '';
我检查过没有问题.
现在在add.ctp文件中我加法
<input type="file" multiple />
在输出中我看到文件类型字段.现在当我点击这个字段并上传图像然后mojila bug给了我一个错误.那是
document.querySelector(...)为null错误
我不知道这个错误.在这里为什么说queryselector是null？
小智 39
document.querySelector()行为与jQuery.(document).ready()方法类似.当DOM准备就绪时,选择器返回该对象.
我建议你调用页面底部的所有JS脚本.
小智 9
file.jsconst heading1 = document.querySelector(".heading1");
console.log(heading1);
defer （最佳和推荐方式）：<!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>
body标签之前的底部<!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>
为了确保您的DOM准备就绪，您可以将其添加到JS文件中。
// 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){
...
}
});
这样，您可以随时随地调用js文件。请查看这个出色的答案，以进一步了解这些问题。
还要看看其他的Google规则。
| 归档时间： |
|
| 查看次数： |
43632 次 |
| 最近记录： |