image load en een css attribute werken niet
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
$(document).on('change','#afbeelding',function(e){
//const size = this.files[0].size / 1024 / 1024;
var _URL = window.URL || window.webkitURL;
var file, img;
var blah;
var wid, ht;
var sub = $('#submitLink');
if ((file = this.files[0])) {
img = new Image();
img.onload = function () {
wid = this.width;
ht = this.height;
if (wid < 728 || ht > 728)
{ console.log(wid);
//$('#submitLink').attr('disabled','disabled');
$('#submitLink').attr('style','display:none!important');
} else {
$('#submitLink').removeAttr('disabled');
}
$('#blah').attr('src', URL.createObjectURL(file));
// alert(wid);
// alert(ht);
};
console.log(URL.createObjectURL(file));
$('#blah').attr('src', URL.createObjectURL(file));
img.src = _URL.createObjectURL(file);
}
});
//const size = this.files[0].size / 1024 / 1024;
var _URL = window.URL || window.webkitURL;
var file, img;
var blah;
var wid, ht;
var sub = $('#submitLink');
if ((file = this.files[0])) {
img = new Image();
img.onload = function () {
wid = this.width;
ht = this.height;
if (wid < 728 || ht > 728)
{ console.log(wid);
//$('#submitLink').attr('disabled','disabled');
$('#submitLink').attr('style','display:none!important');
} else {
$('#submitLink').removeAttr('disabled');
}
$('#blah').attr('src', URL.createObjectURL(file));
// alert(wid);
// alert(ht);
};
console.log(URL.createObjectURL(file));
$('#blah').attr('src', URL.createObjectURL(file));
img.src = _URL.createObjectURL(file);
}
});
De code spreekt voor zich.
De img width laat hij zien in de console.log.
Maar #blah krijgt geen source, dus de img ord niet getoond.
En $('#submitLink').attr('style','display:none!important'); gebeurd niks mee.
Ook geen enkele foutmelding, dus vind dit heel vreemd.
Een id waarde moet toch globaal beschikbaar zijn?
MVG
Daniel
Toevoeging op 24/04/2024 15:00:43:
Als ik trouwens :
$('#submitLink').attr('style','display:none!important');
Net onder
$(document).on('change','#afbeelding',function(e){
plaats, dan gebeurd er hetzelfde. Terwijl die gewoon bestaat in een bootstrap modal waarin deze form #afbeelding geladen word
Toevoeging op 24/04/2024 16:12:46:
Kleine toevoeging.
Ik plaats dit er ook bij
Code (php)
1
2
3
4
5
6
2
3
4
5
6
if ($("#pic").length > 0) // use this if you are using id to check
{
// it exists
console.log('exists');
$('#pic').attr('style','display:block');
}
{
// it exists
console.log('exists');
$('#pic').attr('style','display:block');
}
Een ander element, en hij geeft aan exist in console log, maar kan er niks mee doen.
Snap hier niks van, dit soort dingen is me nooit overkomen.
1. e.target.files ipv this.files
2. img.width ipv this.width
3. img.height ipv this.height
4. !important in een inline style? nonono ;-)
5. het src attribuut van #blah werd twee keer gezet
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(document).on('change', '#afbeelding', (e) => {
const _URL = window.URL || window.webkitURL
let file, img
let w, h
if ((file = e.target.files[0])) {
img = new Image()
img.onload = () => {
w = img.width
h = img.height
if (w < 728 || h > 728) {
$('#submitLink').attr('style', 'display:none')
} else {
$('#submitLink').removeAttr('disabled')
}
$('#blah').attr('src', URL.createObjectURL(file))
}
img.src = _URL.createObjectURL(file)
}
})
const _URL = window.URL || window.webkitURL
let file, img
let w, h
if ((file = e.target.files[0])) {
img = new Image()
img.onload = () => {
w = img.width
h = img.height
if (w < 728 || h > 728) {
$('#submitLink').attr('style', 'display:none')
} else {
$('#submitLink').removeAttr('disabled')
}
$('#blah').attr('src', URL.createObjectURL(file))
}
img.src = _URL.createObjectURL(file)
}
})