Question

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

我想我需要使用＆＃34; AJAX上传＆＃34;要做到这一点，也许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>

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

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

Answer 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 = ?子句来仅显示特定用户的上传内容，例如。

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

2 个答案: