Как отобразить каждый файл под другим при загрузке

Question

Я загружаю несколько файлов, и когда загрузка прошла успешно, я хочу для каждого файла echo Upload successful! with Filename Проблема заключается в том, что при наличии нескольких файлов echo для каждого файла перезаписывает другой.Так что я вижу только Upload successful! with Filename из последнего загруженного файла!Как я могу сделать эхо для каждого файла, который загружается друг под другом в том же div (alert-success)?

Это мой код:

///---///
else {

    // file is ready to be uploaded    
    $tmpFilePath = $_FILES['file']['tmp_name'];            
    $newFilePath = $dir.'/' . $_FILES['file']['name'];     

        if(move_uploaded_file($tmpFilePath, $newFilePath)) {    

            echo '<br /><div class="alert alert-success"><b>Upload Successful!</b>&nbspFile: '.$_FILES["file"]["name"].'</div><br />';              

        }

     exit;
}

Это HTMLдля загрузки файлов:

    <!-- DROPAREA -->
<div id="drop_file_zone" ondrop="upload_file(event)" ondragover="return false">
  <div id="drag_upload_file">
    <p>DROP FILE(S) HERE</p>
    <p>or</p>
    <p><input class="browse btn btn-primary" type="button" value="Browse" onclick="file_explorer();"></p>
    <input type="file" id="selectfile" name="upload" multiple>
  </div>
</div>
<!-- END DROPAREA -->

Answer 1

foreach ($file_ary as $file) {
    print 'File Name: ' . $file['name'];
    print 'File Type: ' . $file['type'];
    print 'File Size: ' . $file['size'];
}

и если вы используете Ajax, вы можете отправить результат в виде json текущему div

Answer 2

Вы должны будете сделать это с помощью JavaScript.Скрипт взаимодействует со страницей и отправляет файл (ы) в PHP-скрипт для обработки.Выход вернется и может быть отображен.Это много кода, чтобы показать это здесь.но вам понадобится API Filereader в JavaScript.Это очень много кода, но я дам вам основные процедуры, чтобы начать.

    // process file
    kuva.doFile = function (thisFile) {
    // output message
    kuva.msg(thisFile.name + ' ' + kuvaoptions.msgLoading + '.' );

    // make preview image and keep reference to this html block
    var preview = kuva.makePreview(thisPath + kuvaoptions.loadingImg, thisFile.name);

    // start the FileReder API
    var reader = new FileReader();
    // callback onprogress
    reader.onprogress =  function(evt) {
        kuva.updateProgressBar(kuva.updateProgress(evt), preview);
    };

    // callback onloadstart
    reader.onloadstart = function () {
        // progress bar to 0.
        kuva.updateProgressBar(0, preview);
    };

    // callback onloadend
    reader.onloadend = function () {
        // progress bar to 100.
        kuva.updateProgressBar(100, preview);
    };

    reader.onerror = function (e) {
        console.log('Reader error: ' + e);
    };

    // callback onload (ready loading)
    reader.onload = function (readerEvent) {

        // start the Image API 
        var image = new Image();
        image.onload = function () {
            var arr_dim = kuva.calcResize(image.width, image.height);
            // size
            kuva.msg( thisFile.name + ' ' + kuvaoptions.msgSizeIs + ': ' + image.width + ' x ' + image.height);
            // already a resize
            if(image.width !== arr_dim['width']) {
                kuva.msg(thisFile.name + ' ' + kuvaoptions.msgResizeTo + ': ' + arr_dim['width'] + ' x ' + arr_dim['height']);
            }

            // resize with canvas
            var dataURL = kuva.rezise2step(image, arr_dim, thisFile.type);

            // show the picture and set widht: auto
            preview.find('img.kuvaimg').attr({
                'style': 'width:auto; height:' + kuvaoptions.previewHeight + 'px;',
                'src': dataURL //this.result, 
            });

            // send this image
            $.event.trigger({
                type: "sendFile",
                blob: dataURLtoBlob(dataURL),
                fileName: thisFile.name,
                preview: preview
            });
        }; // end image onload

        // result of reader to image starts image.onload
        image.src = readerEvent.target.result;
    }; // end reader onload

    // set upload to reader so reader.onload start
    reader.readAsDataURL(thisFile);
}; // end function

Полный код имеет изменение размера изображения, предварительный просмотр изображения на стороне клиента, индикаторы выполнения и т. Д.