如何在上传时回显每个文件

Question

I am uploading multiple files and when upload is successful, I want for each file, echo Upload successful! with Filename The problem is: when there are multiple files, the echo for each file overwrites the other one. So I can only see Upload successful! with Filename from the last uploaded file! How can I make the echo's for each file that is being uploaded under each other in the same div (alert-success)?

This is my code:

///---///
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;
}

This is the html for uploading the files:

    <!-- 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

You will have to do this with javascript. The script will interact with the page and sends the file(s) to a PHP script for processing. The output will return and can be displayed. It is to much code to show it here. but you will need the Filereader api in javascript. It is to much code but i will give you the main routine to get started.

    // 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

The complete code has image rezise, client side image preview, progressbars etc.