上传后如何跟踪和显示上传的图片？答案

【问题标题】：How to keep track of and display uploaded images after uploading?上传后如何跟踪和显示上传的图片？
【发布时间】：2016-08-18 22:53:41
【问题描述】：

我做了一个小页面，你可以上传图片，这是简单的 php 上传。我希望每个人都能够上传图片并在网站上查看其他人上传的内容。图片上传后如何显示？我希望能够全局跟踪所有上传的图像，以便每个人都可以浏览它们。

我认为我需要使用“AJAX 上传”来做到这一点，也许 javascript 在上传后显示图像......但是如何？

我试过了：

function GetFileName(){

            var fileInput = document.getElementById('fileToUpload');
            var fileName = fileInput.value.split(/(\\|\/)/g).pop();

            var img = document.createElement('img');
            img.src = 'uploads/' + fileName;
            img.setAttribute('width', '100px');
            img.setAttribute('height', '100px');
            img.alt = fileName;         
            document.body.appendChild(img);
            alert(fileName);
        }




<form method="post" action="upload.php" enctype="multipart/form-data">
            <input type="file" name="fileToUpload" id="fileToUpload" class="upload">
            <input type="submit" onclick="GetFileName()" value="Upload Image" name="submit" id="submit">
</form>

这几乎是工作，但图像只显示几秒钟然后消失。

【问题讨论】：

标签： php image file-upload

【解决方案1】：

在 Jquery 中尝试这样的事情：

$('#upload').on('click', function() {
    var img_name  = $('#pic').val();
    var file_data = $('#pic').prop('files')[0];
    var form_data = new FormData();
    form_data.append('file', file_data);

    $.ajax({
            url         : 'upload.php',     // point to server-side PHP script 
            dataType    : 'text',           // what to expect back from the PHP script, if anything
            cache       : false,
            contentType : false,
            processData : false,
            data        : form_data,                         
            type        : 'post',
            success     : function(output){
                if(output)  // if success
                {
                    $('#img_container').append('<img src="img_path/"'+ img_name +'>');  // It will display the uploaded image
                }
            }
     });
     $('#pic').val('');                     /* Clear the file container */
});

HTML：

<body>
<input id="pic" type="file" name="pic" />
<button id="upload">Upload</button>

<!-- To display image -->
<div id="img_container">

</div>
</body>

【讨论】：

【解决方案2】：

我认为您的问题的关键问题在于如何跟踪所有上传。依靠持久性存储（如数据库）在全局级别跟踪所有上传的文件可能会更好地解决这个问题。

例如，当发生上传时，您可以像这样将一条记录插入到数据库中的uploads 表中......

// prepare the statement
$stmt = $db->prepare("INSERT INTO uploads (userId, fileName) VALUES(:userId, :fileName)");

if ($_FILES['upload']['error'] == UPLOAD_ERR_OK) { // no errors
    // move the file to a permanent location
    $tmpName = $_FILES['upload']['tmp_name'];
    move_uploaded_file($tmpName, $uploadDir . "/$tmp_name");
    $result = $stmt->execute(
        [
            'userId'   => $_SESSION['userId'], // or however you track the user
            'fileName' => $_FILES['upload']['tmp_name'],
        ]
    );
    if ($result) {
        // record added successfully! 
    } else {
        // failed
    }
}

现在您可以通过查看数据库中的uploads 表来显示所有上传的文件，然后像这样向用户显示它们......

// prepare the statement
$start = $_GET['start'] ?? 0;
$stmt = $db->prepare("SELECT userId, fileName FROM uploads LIMIT ?,20");
if ($stmt->execute([$start])) {
    $result = $stmt->fetchAll(PDO::FETCH_ASSOC);
    foreach($result as $row) {
        echo "<img src='$uploadDir/{$row['fileName']}'>";
    }
}

或者，例如，您可以通过向该查询添加WHERE userId = ? 子句来仅显示特定用户进行的上传。

【讨论】：