如何在单独的js文件中将json_encode中的两个变量分开

Question

I am trying to add an upload with image reduction to my site, then once the uploaded image is inserted into a db and moved to the correct folder the image is displayed on the correct page. For it all to work I need to be able to somehow strip out the id and filename from the json_encode response and assign both to separate variables in app.js. I have been on this for a while now and am out of options. The code has been adapted/hacked from https://github.com/joelvardy/Javascript-image-upload if this helps.

process.php

    $filename = md5(mt_rand()).'.png';
    $status = (boolean) move_uploaded_file($_FILES['photo']['tmp_name'], '../article_images/'.$filename);

    mysqli_query($link,"INSERT elements SET account_id = '1', site_id = '1', page_id = '1', appear = 'checked', element_type = 'image', image_name = '$filename', image_layout = 'normal', border_style = 'solid', border_width = '0', border_color = '0', border_radius = '0', background_color = '000000', background_transparency = '0', line_color = '000000', line_width = '0', line_style = 'solid', opacity = '1', rotate = '0', shadow_h = '0', shadow_v = '0', shadow_blur = '0', shadow_spread = '0', shadow_color = '000000', x_pos = '100', y_pos = '100', h_pos = '200', w_pos = '200', z_depth = '1', element_lock = 'unchecked'");

    $id = mysqli_insert_id($link);

    $response = (object) [
        'id' => $id,
        'status' => $status
    ];

    if ($status) {
        $response->url = $filename;
    }

    echo json_encode($response);

app.js

cache:false,

document.addEventListener('DOMContentLoaded', function (event) {

    'use strict';

    var resize = new window.resize();
    resize.init();

    // Upload photo
    var upload = function (photo, callback) {
        var formData = new FormData();
        formData.append('photo', photo);
        var request = new XMLHttpRequest();
        request.onreadystatechange = function() {
            if (request.readyState === 4) {
                callback(request.response);
            }
        }
        request.open('POST', '/upload/process.php');
        request.responseType = 'json';
        request.send(formData);
    };

    var fileSize = function (size) {
        var i = Math.floor(Math.log(size) / Math.log(1024));
        return (size / Math.pow(1024, i)).toFixed(2) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i];
    };

    document.querySelector('form input[type=file]').addEventListener('change', function (event) {
        event.preventDefault();

        var files = event.target.files;
        for (var i in files) {

            if (typeof files[i] !== 'object') return false;

            (function () {

                var initialSize = files[i].size;

                resize.photo(files[i], 1200, 'file', function (resizedFile) {

                    var resizedSize = resizedFile.size;

                    upload(resizedFile, function (response) {
                        var rowElement = document.createElement('div');

                        var id = 'id here';
                        var filename = 'filename here';

                        var test = "<div id='"+id+"' class='click border_width border_radius border_style background_color border_color opacity rotate blur shadow_h shadow_v shadow_blur shadow_spread shadow_color z_depth link ui-resizable ui-draggable ui-draggable-handle' account_id='1' site_id='1' page_id='1' element_type='image' appear='checked' image_name='../article_images/"+filename+"' opacity='1' rotate='0' blur='0' shadow_h='0' shadow_v='0' shadow_spread='0' shadow_blur='0' shadow_color='000000' background_color='000000' border_width='0' border_style='0' border_radius='0' border_color='0' x_pos='100' y_pos='100' h_pos='100' w_pos='100' z_depth='1' link2='' element_lock='checked' style='cursor:move; position:absolute; left:100px; top:100px; height:100px; width:100px; opacity:1; rotate:0; border-width:0px; border-style:0; border-color:#000000; border-radius:0px; -moz-border-radius:0px; -webkit-border-radius:0px; -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); box-shadow:0px 0px 0px #000000; z-index:1;'></div>";

                        alert(response);

                        $( test ).insertAfter( ".image_upload" );

                    });

                    resize.photo(resizedFile, 600, 'dataURL', function (thumbnail) {
                        console.log('Display the thumbnail to the user: ', thumbnail);
                    });

                });

            }());

        }

    });

});