0

I'm using this simple AJAX uploader and when I upload an image I need to get the dimensions of the image file before uploading. https://www.lpology.com/code/ajaxuploader/docs.php

Right now it only gives filename, extension and file size. No way to get the selected file object. Under onSubmit method using alert(JSON.stringify(this, null, 4)) gave the following output in which anything in it cannot be used to find the image's dimensions.

Viewing the source, I could find the file input as shown below.

<input name="uploadfile" multiple="" style="position: absolute; right: 0px; margin: 0px; padding: 0px; font-size: 480px; font-family: sans-serif; cursor: pointer; height: 100%; z-index: 16777270;" type="file">

{
    "_opts": {
        "url": "/wps/web/app_dev.php/ajax-upload",
        "dropzone": "",
        "dragClass": "",
        "form": "",
        "overrideSubmit": true,
        "cors": false,
        "withCredentials": false,
        "progressUrl": false,
        "sessionProgressUrl": false,
        "nginxProgressUrl": false,
        "multiple": true,
        "multipleSelect": true,
        "maxUploads": 3,
        "queue": true,
        "checkProgressInterval": 500,
        "keyParamName": "APC_UPLOAD_PROGRESS",
        "sessionProgressName": "PHP_SESSION_UPLOAD_PROGRESS",
        "nginxProgressHeader": "X-Progress-ID",
        "customProgressHeaders": {},
        "corsInputName": "XHR_CORS_TARGETORIGIN",
        "allowedExtensions": [
            "jpg",
            "jpeg",
            "gif"
        ],
        "accept": "",
        "maxSize": 1024,
        "name": "uploadfile",
        "data": {},
        "noParams": true,
        "autoSubmit": true,
        "multipart": true,
        "method": "POST",
        "responseType": "json",
        "debug": false,
        "hoverClass": "hover",
        "focusClass": "focus",
        "disabledClass": "",
        "customHeaders": {},
        "encodeHeaders": true,
        "autoCalibrate": true,
        "button": null
    },
    "_queue": [
        {
            "id": "a1696f281-6b04-442e-887c-fba95a148d1f",
            "file": {},
            "name": "1.jpg",
            "ext": "jpg",
            "btn": {},
            "size": 25
        }
    ],
    "_active": 0,
    "_disabled": false,
    "_maxFails": 10,
    "_progKeys": {},
    "_sizeFlags": {},
    "_btns": [
        {}
    ],
    "_manDisabled": false,
    "_overBtn": {},
    "_input": {}
}
Teshan N.
  • 2,307
  • 3
  • 30
  • 59
  • You are just over complicating your problem. Target the field and get its **width:** `document.querySelector('#fieldId').naturalWidth` and **height:** `document.querySelector('#fieldId').naturalHeight()`. The plugin you mentioned doesn't provide an API to get the dimensions of selected image file (which IMHO is reasonable as it supports multiple filetypes). – Fr0zenFyr May 04 '18 at 10:52
  • Obviously. But this $("input[name='uploadfile']").naturalHeight() does not work. – Teshan N. May 04 '18 at 11:10
  • sorry, my bad... it should be `document.querySelector('#fieldId').naturalHeight`. it's not a function – Fr0zenFyr May 04 '18 at 11:11
  • Doesn't something like [this answer](https://stackoverflow.com/a/8904008/1369473) address your problem? – Fr0zenFyr May 04 '18 at 11:19
  • These did not work. – Teshan N. May 04 '18 at 11:33

0 Answers0