Question

我正在上传多个文件，上传成功后，我想为每个文件回显Upload successful! with Filename 问题是：当有多个文件时，每个文件的回显都会覆盖另一个文件。因此，我只能从最近上传的文件中看到Upload successful! with Filename！如何在同一div（警报成功）中互相上传的每个文件做回声？

这是我的代码：

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

您将必须使用javascript执行此操作。该脚本将与页面进行交互，并将文件发送到PHP脚本进行处理。输出将返回并可以显示。要在此处显示很多代码。但您将需要JavaScript中的Filereader API。这是很多代码，但是我会给您入门的主要例程。

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

完整的代码具有图像缩放，客户端图像预览，进度条等。

Answer 2

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

如果使用的是Ajax，则可以将结果作为json发送到当前div

上传时如何在彼此之下回显每个文件

2 个答案: