如何在上傳後跟蹤並顯示上傳的圖像？

我做了一個小頁面，您可以上傳圖片，它是簡單的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

如何在上傳後跟蹤並顯示上傳的圖像？

回答

相關問題