Question

我在PHP上传图片和javascrit进度条时遇到问题当我添加PHP动态“选择选项”字段时，我遇到了问题。我需要这个选项让用户选择他想要添加图像的广告。这是我的表格：

<div id="uploaded">

</div>
<div>
<form action="" method="post" enctype="multipart/form-data">
<input name="image" id="image_id" type="file" size="25" value="Odaberi sliku" />
<p>

<select name="page_id" class="option_field">
<?php
    foreach ($pages as $page) {
        echo '<option value="' . $page['page_id'] . '">' . $page['name_ad'] . '</option>';
    }
?>
</select>
</p>
<input type="submit" id="submit" value="Add Images" class="submit_btn"/>
</form>
</div>
<div class="upload_progress" id="upload_progress"></div>

使用此选项字段，我使用$ _POST ['page_id']获取数据。当我在我的浏览器中禁用javascript上传图像工作正常，但使用JavaScript我无法获得“page_id”的价值。这是我的javascript代码：

var handleUpload = function(event) {
    event.preventDefault();
    event.stopPropagation();

    var fileInput = document.getElementById('image_id');
    var data = new FormData();

    data.append('javascript', true);

        if(fileInput.files[0].size > 1050000) {
        document.getElementById("image_id").innerHTML = "Image too big (max 1Mb)";
        alert('Fotografija koju želite dodati je veća od 1Mb!');
        window.location="upload_images.php"
        return false;
        }   


    for (var i =0; i < fileInput.files.length; ++i) {
        data.append('image', fileInput.files[i]);
    }

    var request = new XMLHttpRequest();

    request.upload.addEventListener('progress', function(event) {
        if (event.lengthComputable) {
            var percent = event.loaded / event.total;
            var progress = document.getElementById('upload_progress');

            while (progress.hasChildNodes()) {
                progress.removeChild(progress.firstChild);
            }

            progress.appendChild(document.createTextNode(Math.round(percent * 100) + ' %'));
        }
    });

    request.upload.addEventListener('load', function(event) {
        document.getElementById('upload_progress').style.display = 'none';
    });

    request.upload.addEventListener('error', function(event) {
        alert('Dodavanje slika nije bilo uspješno! Pokušajte ponovo.');
    });

    request.addEventListener('readystatechange', function(event) {

        if (this.readyState == 4) {
            if(this.status == 200) {
                var links = document.getElementById('uploaded');

                window.location="upload_images.php?success"
                console.log(this.response); 
            } else {
                console.log('Server replied with HTTP status ' + this.status);
            }
        }

    });

    request.open('POST', 'upload_images.php');
    request.setRequestHeader('Cache-Control', 'no-cache');

    document.getElementById('upload_progress').style.display = 'block';

    request.send(data);
}

window.addEventListener('load', function(event) {
    var submit = document.getElementById('submit');
    submit.addEventListener('click', handleUpload);

});

在添加选择选项字段之前一切正常，没有javascript，一切正常。问题是，当javascript工作时，我无法通过$ _POST ['page_id']获得价值。

PHP上传图片和Javascript上传进度冲突

0 个答案: