如何在上传后跟踪并显示上传的图像？

我做了一个小页面，您可以上传图片，它是简单的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>

这几乎是工作，但仅显示图像第二少，然后消失。

来源

2016-08-18 AsdMan

尝试一些像这样的事情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>

来源

2016-08-18 11:20:29

我认为关键的问题你的问题在这里是如何保持所有上传的轨道。这可以通过依赖像数据库这样的持久性存储来更好地解决，以便在全局级别跟踪所有上传的文件。

例如，当上载时，可以插入一条记录到一个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 = ?子句该查询，例如只显示与特定用户所做出的上传。

来源

2016-08-18 11:30:57 Sherif

如何在上传后跟踪并显示上传的图像？

回答

相关问题