удалить загруженный файл из моей PHP папку

Question

я дал демо-ссылку

http://exposureroom.biz/upload.aspx здесь я реализации AJAX загрузки файлов процесса-бар в моем веб-сайте, так вот я хочу, чтобы добавить кнопку Удалить для удалить загруженные файлы.

файл расслоение плотной:

// common variables 
var iBytesUploaded = 0; 
var iBytesTotal = 0; 
var iPreviousBytesLoaded = 0; 
var iMaxFilesize = 1048576; // 1MB 
var oTimer = 0; 
var sResultFileSize = ''; 

function secondsToTime(secs) { // we will use this function to convert seconds in normal time format 
    var hr = Math.floor(secs/3600); 
    var min = Math.floor((secs - (hr * 3600))/60); 
    var sec = Math.floor(secs - (hr * 3600) - (min * 60)); 

    if (hr < 10) {hr = "0" + hr; } 
    if (min < 10) {min = "0" + min;} 
    if (sec < 10) {sec = "0" + sec;} 
    if (hr) {hr = "00";} 
    return hr + ':' + min + ':' + sec; 
}; 

function bytesToSize(bytes) { 
    var sizes = ['Bytes', 'KB', 'MB']; 
    if (bytes == 0) return 'n/a'; 
    var i = parseInt(Math.floor(Math.log(bytes)/Math.log(1024))); 
    return (bytes/Math.pow(1024, i)).toFixed(1) + ' ' + sizes[i]; 
}; 

function fileSelected() { 

    // hide different warnings 
    document.getElementById('upload_response').style.display = 'none'; 
    document.getElementById('error').style.display = 'none'; 
    document.getElementById('error2').style.display = 'none'; 
    document.getElementById('abort').style.display = 'none'; 
    document.getElementById('warnsize').style.display = 'none'; 

    // get selected file element 
    var oFile = document.getElementById('image_file').files[0]; 

    // filter for image files 
    var rFilter = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i; 
    if (! rFilter.test(oFile.type)) { 
     document.getElementById('error').style.display = 'block'; 
     return; 
    } 

    // little test for filesize 
    if (oFile.size > iMaxFilesize) { 
     document.getElementById('warnsize').style.display = 'block'; 
     return; 
    } 

    // get preview element 
    var oImage = document.getElementById('preview'); 

    // prepare HTML5 FileReader 
    var oReader = new FileReader(); 
     oReader.onload = function(e){ 

     // e.target.result contains the DataURL which we will use as a source of the image 
     oImage.src = e.target.result; 

     oImage.onload = function() { // binding onload event 

      // we are going to display some custom image information here 
      sResultFileSize = bytesToSize(oFile.size); 
      document.getElementById('fileinfo').style.display = 'block'; 
      document.getElementById('filename').innerHTML = 'Name: ' + oFile.name; 
      document.getElementById('filesize').innerHTML = 'Size: ' + sResultFileSize; 
      document.getElementById('filetype').innerHTML = 'Type: ' + oFile.type; 
      document.getElementById('filedim').innerHTML = 'Dimension: ' + oImage.naturalWidth + ' x ' + oImage.naturalHeight; 
     }; 
    }; 

    // read selected file as DataURL 
    oReader.readAsDataURL(oFile); 
} 

function startUploading() { 
    // cleanup all temp states 
    iPreviousBytesLoaded = 0; 
    document.getElementById('upload_response').style.display = 'none'; 
    document.getElementById('error').style.display = 'none'; 
    document.getElementById('error2').style.display = 'none'; 
    document.getElementById('abort').style.display = 'none'; 
    document.getElementById('warnsize').style.display = 'none'; 
    document.getElementById('progress_percent').innerHTML = ''; 
    var oProgress = document.getElementById('progress'); 
    oProgress.style.display = 'block'; 
    oProgress.style.width = '0px'; 

    // get form data for POSTing 
    //var vFD = document.getElementById('upload_form').getFormData(); // for FF3 
    var vFD = new FormData(document.getElementById('upload_form')); 

    // create XMLHttpRequest object, adding few event listeners, and POSTing our data 
    var oXHR = new XMLHttpRequest();   
    oXHR.upload.addEventListener('progress', uploadProgress, false); 
    oXHR.addEventListener('load', uploadFinish, false); 
    oXHR.addEventListener('error', uploadError, false); 
    oXHR.addEventListener('abort', uploadAbort, false); 
    oXHR.open('POST', 'upload.php'); 
    oXHR.send(vFD); 

    // set inner timer 
    oTimer = setInterval(doInnerUpdates, 300); 
} 

function doInnerUpdates() { // we will use this function to display upload speed 
    var iCB = iBytesUploaded; 
    var iDiff = iCB - iPreviousBytesLoaded; 

    // if nothing new loaded - exit 
    if (iDiff == 0) 
     return; 

    iPreviousBytesLoaded = iCB; 
    iDiff = iDiff * 2; 
    var iBytesRem = iBytesTotal - iPreviousBytesLoaded; 
    var secondsRemaining = iBytesRem/iDiff; 

    // update speed info 
    var iSpeed = iDiff.toString() + 'B/s'; 
    if (iDiff > 1024 * 1024) { 
     iSpeed = (Math.round(iDiff * 100/(1024*1024))/100).toString() + 'MB/s'; 
    } else if (iDiff > 1024) { 
     iSpeed = (Math.round(iDiff * 100/1024)/100).toString() + 'KB/s'; 
    } 

    document.getElementById('speed').innerHTML = iSpeed; 
    document.getElementById('remaining').innerHTML = '| ' + secondsToTime(secondsRemaining);   
} 

function uploadProgress(e) { // upload process in progress 
    if (e.lengthComputable) { 
     iBytesUploaded = e.loaded; 
     iBytesTotal = e.total; 
     var iPercentComplete = Math.round(e.loaded * 100/e.total); 
     var iBytesTransfered = bytesToSize(iBytesUploaded); 

     document.getElementById('progress_percent').innerHTML = iPercentComplete.toString() + '%'; 
     document.getElementById('progress').style.width = (iPercentComplete * 4).toString() + 'px'; 
     document.getElementById('b_transfered').innerHTML = iBytesTransfered; 
     if (iPercentComplete == 100) { 
      var oUploadResponse = document.getElementById('upload_response'); 
      oUploadResponse.innerHTML = '<h1>Please wait...processing</h1>'; 
      oUploadResponse.style.display = 'block'; 
     } 
    } else { 
     document.getElementById('progress').innerHTML = 'unable to compute'; 
    } 
} 

function uploadFinish(e) { // upload successfully finished 
    var oUploadResponse = document.getElementById('upload_response'); 
    oUploadResponse.innerHTML = e.target.responseText; 
    oUploadResponse.style.display = 'block'; 

    document.getElementById('progress_percent').innerHTML = '100%'; 
    document.getElementById('progress').style.width = '400px'; 
    document.getElementById('filesize').innerHTML = sResultFileSize; 
    document.getElementById('remaining').innerHTML = '| 00:00:00'; 

    clearInterval(oTimer); 
} 

function uploadError(e) { // upload error 
    document.getElementById('error2').style.display = 'block'; 
    clearInterval(oTimer); 
} 

function uploadAbort(e) { // upload abort 
    document.getElementById('abort').style.display = 'block'; 
    clearInterval(oTimer); 
} 

HTML файл:

<!DOCTYPE html> 
<html lang="en" > 
    <head> 
     <meta charset="utf-8" /> 
     <title>Pure HTML5 file upload | Script Tutorials</title> 
     <link href="css/main.css" rel="stylesheet" type="text/css" /> 
     <script src="js/script.js"></script> 
    </head> 
    <body> 
     <header> 
      <h2>Pure HTML5 file upload</h2> 
      <a href="http://www.script-tutorials.com/pure-html5-file-upload/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a> 
     </header> 
     <div class="container"> 
      <div class="contr"><h2>You can select the file (image) and click Upload button</h2></div> 

      <div class="upload_form_cont"> 
       <form id="upload_form" enctype="multipart/form-data" method="post" action="upload.php"> 
        <div> 
         <div><label for="image_file">Please select image file</label></div> 
         <div><input type="file" name="image_file" id="image_file" onchange="fileSelected();" /></div> 
        </div> 
        <div> 
         <input type="button" value="Upload" onclick="startUploading()" /> 
        </div> 
        <div id="fileinfo"> 
         <div id="filename"></div> 
         <div id="filesize"></div> 
         <div id="filetype"></div> 
         <div id="filedim"></div> 
        </div> 
        <div id="error">You should select valid image files only!</div> 
        <div id="error2">An error occurred while uploading the file</div> 
        <div id="abort">The upload has been canceled by the user or the browser dropped the connection</div> 
        <div id="warnsize">Your file is very big. We can't accept it. Please select more small file</div> 

        <div id="progress_info"> 
         <div id="progress"></div> 
         <div id="progress_percent">&nbsp;</div> 
         <div class="clear_both"></div> 
         <div> 
          <div id="speed">&nbsp;</div> 
          <div id="remaining">&nbsp;</div> 
          <div id="b_transfered">&nbsp;</div> 
          <div class="clear_both"></div> 
         </div> 
         <div id="upload_response"></div> 
        </div> 
       </form> 

       <img id="preview" /> 
      </div> 
     </div> 
    </body> 
</html> 

upload.php

<?php 
     if($_FILES["image_file"]){ 


       $uploads_dir = 'files/'; 

       $sFileName = $_FILES['file_name']['name']; 
       $sFileType = $_FILES['file_name']['type']; 
       function bytesToSize1024($bytes, $precision = 2) { 
        $unit = array('B','KB','MB'); 
        return @round($bytes/pow(1024, ($i = floor(log($bytes, 1024)))), $precision).' '.$unit[$i]; 
     } 
       move_uploaded_file($_FILES['file_name']['tmp_name'], "$uploads_dir/$sFileName"); 
       exit; 

       } 

       ?> 

Answer 1

Изменить PHP скрипт для

<?php 

function bytesToSize1024($bytes, $precision = 2) { 
    $unit = array('B','KB','MB'); 
    return @round($bytes/pow(1024, ($i = floor(log($bytes, 1024)))), $precision).' '.$unit[$i]; 
} 

$uploads_dir = 'files/'; 

$sFileName = $_FILES['image_file']['name']; 
$sFileType = $_FILES['image_file']['type']; 
$sFileSize = bytesToSize1024($_FILES['image_file']['size'], 1); 

move_uploaded_file($_FILES['image_file']['tmp_name'],$uploads_dir.$sFileName); 

echo <<<EOF 
<p>Your file: {$sFileName} has been successfully received.</p> 
<p>Type: {$sFileType}</p> 
<p>Size: {$sFileSize}</p> 
EOF; 

?> 

создать файл для удаления загруженного файла

<?php 
unlink($_POST['filename']); 
echo 'Deleted'; 
?> 

добавить еще один файл для отображения загруженных файлов, которые вы можете изменить его, как вы хотите

<script type="text/javascript" src="js/jquery.min.js"></script> 

<script> 
function deleteFile(file) { 
    $('#delFile').hide(); 
    var order = 'filename='+file; 
    $.post("delfilephp.php", order, function(response,status, xhr){ 

         if (status == "success") { 
          alert(response); 

         } 
         else if (status == "error") { 
          alert('Something went wrong, we are working to fix it'); 
         } 
       }); 

} 
</script> 

<div id="delFile"> 
<?php 
//path to directory to scan 
$directory = "files/"; 

//get all image files with a .jpg extension. 
$images = glob($directory . "*.*"); 

//print each file name 
foreach($images as $image) 
{ 
    echo '<pre>'; 
    echo $image; 
    ?> 
<a href="javascript:;" onclick="deleteFile('<?php echo $image; ?>')">Delete File</a> 
<?php 
} 
?> 

</div>