How to make so people can upload files to my website and display them?

How to make so people can upload files to my website and display them, for example, I want people to be able to upload books like archive.org. FYI I do not know PHP. Heres my code

<html>    
    <head> 

        <title>Book Store</title>  
        <link rel="shortcut icon" href="logo2.ico" />
         <link href = "style1.css" type = "text/css" rel = "stylesheet" />  
    </head>    
    <body> 

    <style>

</style>

</div>


    <h1>Book Store</h1>
     <input type="text" id="booksearch" onkeyup="search()" placeholder="Search for books.."size="40">

<ul id="myUL">
  <li><a href="">A</a></li><br>
  <li><a href="alice.epub">Alice and Wonderland</a></li><br>
  <li><a href="">B</a></li><br>
  <li><a href="Bible kjv pdf.html">Bible King James Version</a></li><br>
  <li><a href="">H</a></li><br>
  <li><a href="hunted down.epub">Hunted Down by Charles Dickens</a></li><br> 
  <li><a href="">P</a></li><br>
  <li><a href="Pilgrim progress.html">Pilgrim Progress</a></li>
  <li><a href="Pride and Prejudice.epub">Pride and Prejudice epub</a></li><br>
  <li><a href="">S</a></li><br>
  <li><a href="Sherlock Holmes complete book.epub">Sherlock Holmes complete book epub</a></li>
  <li><a href="cano.pdf">Sherlock Holmes complete book pdf</a></li><br>
  <li><a href="">T</a></li><br>
  <li><a href="Holmes.pdf" download>The Adventures of Sherlock Holmes pdf</a><br></li>
  <li><a href="fatherbrown1.epub">The Innocence of Father Brown book ep 1 epub</a></li>
  <li><a href="fatherbrown2.epub">The Wisdom of Father Brown book ep 2 epub</a></li>
  <li><a href="fatherbrown3.epub">The Incredulity Of Father Brown book ep 3 epub</a></li>
  <li><a href="fatherbrown4.epub">The Scandal Of Father Brown ep 4 epub</a></li>
  <li><a href="fatherbrown5.epub">The Secret Of Father Brown ep  epub</a></li><br>
  <li><a href="">N</a></li><br>
  <li><a href="nontredam.epub">Nontre Dam history</a></li><br>
  <li><a href="">R</a></li><br>
  <li><a href="romeo.epub">Romeo and Juliet</a></li>
</ul>   
<a href="https://play.google.com/store/apps/details?id=com.faultexception.reader">Get free epub reader for android</a><br>
<script>
function search() {
  // Declare variables
  var input, filter, ul, li, a, i, txtValue;
  input = document.getElementById('booksearch');
  filter = input.value.toUpperCase();
  ul = document.getElementById("myUL");
  li = ul.getElementsByTagName('li');

  // Loop through all list items, and hide those who don't match the search query
  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    txtValue = a.textContent || a.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}
</script>





       <meta http-equiv="Refresh" content="600">    





<button onclick="JavaScript:alert('You will love this book!')">
<img src="http://moziru.com/images/book-clipart-cartoon-14.jpg" alt="What We think of this Book" height = "100">
<br>What We think of this Book</button>
<br>
<a href="html.html" atnip construction>Atnip Construction</a><br>
</body>    
</html>

JavaScript
​x
 
<html>        <head> ​        <title>Book Store</title>          <link rel="shortcut icon" href="logo2.ico" />         <link href = "style1.css" type = "text/css" rel = "stylesheet" />      </head>        <body> ​    <style>​</style>​</div>​​    <h1>Book Store</h1>     <input type="text" id="booksearch" onkeyup="search()" placeholder="Search for books.."size="40">​<ul id="myUL">  <li><a href="">A</a></li><br>  <li><a href="alice.epub">Alice and Wonderland</a></li><br>  <li><a href="">B</a></li><br>  <li><a href="Bible kjv pdf.html">Bible King James Version</a></li><br>  <li><a href="">H</a></li><br>  <li><a href="hunted down.epub">Hunted Down by Charles Dickens</a></li><br>   <li><a href="">P</a></li><br>  <li><a href="Pilgrim progress.html">Pilgrim Progress</a></li>  <li><a href="Pride and Prejudice.epub">Pride and Prejudice epub</a></li><br>  <li><a href="">S</a></li><br>  <li><a href="Sherlock Holmes complete book.epub">Sherlock Holmes complete book epub</a></li>  <li><a href="cano.pdf">Sherlock Holmes complete book pdf</a></li><br>  <li><a href="">T</a></li><br>  <li><a href="Holmes.pdf" download>The Adventures of Sherlock Holmes pdf</a><br></li>  <li><a href="fatherbrown1.epub">The Innocence of Father Brown book ep 1 epub</a></li>  <li><a href="fatherbrown2.epub">The Wisdom of Father Brown book ep 2 epub</a></li>  <li><a href="fatherbrown3.epub">The Incredulity Of Father Brown book ep 3 epub</a></li>  <li><a href="fatherbrown4.epub">The Scandal Of Father Brown ep 4 epub</a></li>  <li><a href="fatherbrown5.epub">The Secret Of Father Brown ep  epub</a></li><br>  <li><a href="">N</a></li><br>  <li><a href="nontredam.epub">Nontre Dam history</a></li><br>  <li><a href="">R</a></li><br>  <li><a href="romeo.epub">Romeo and Juliet</a></li></ul>   <a href="https://play.google.com/store/apps/details?id=com.faultexception.reader">Get free epub reader for android</a><br><script>function search() {  // Declare variables  var input, filter, ul, li, a, i, txtValue;  input = document.getElementById('booksearch');  filter = input.value.toUpperCase();  ul = document.getElementById("myUL");  li = ul.getElementsByTagName('li');​  // Loop through all list items, and hide those who don't match the search query  for (i = 0; i < li.length; i++) {    a = li[i].getElementsByTagName("a")[0];    txtValue = a.textContent || a.innerText;    if (txtValue.toUpperCase().indexOf(filter) > -1) {      li[i].style.display = "";    } else {      li[i].style.display = "none";    }  }}</script>​​​​​       <meta http-equiv="Refresh" content="600">    ​​​​​<button onclick="JavaScript:alert('You will love this book!')"><img src="http://moziru.com/images/book-clipart-cartoon-14.jpg" alt="What We think of this Book" height = "100"><br>What We think of this Book</button><br><a href="html.html" atnip construction>Atnip Construction</a><br></body>    </html>    ​

Please tell me what I need to add to this code. I don’t have any tried version of what I want. If any questions please ask.

HTML

<html>
<head></head>
<body>
<h2>Please provide the following information:</h2>

<form enctype="multipart/form-data" method="post" action="upload.php">
<input type="hidden" name="MAX_FILE_SIZE" value="5000000" />
Host <br />
<input type="text" name="host" /><p />

Username <br />
<input type="text" name="user" /><p />

Password <br />
<input type="password" name="pass" /><p />

Destination directory <br />
<input type="text" name="dir" /><p />

File <br />
<input type="file" name="file" /><p />

<input type="submit" name="submit" value="Upload File" />
</form>

</body>
</html>

JavaScript
 
<html><head></head><body><h2>Please provide the following information:</h2>​<form enctype="multipart/form-data" method="post" action="upload.php"><input type="hidden" name="MAX_FILE_SIZE" value="5000000" />Host <br /><input type="text" name="host" /><p />​Username <br /><input type="text" name="user" /><p />​Password <br /><input type="password" name="pass" /><p />​Destination directory <br /><input type="text" name="dir" /><p />​File <br /><input type="file" name="file" /><p />​<input type="submit" name="submit" value="Upload File" /></form>​</body></html>​

php

<?php
// get FTP access parameters
$host = $_POST['host'];
$user = $_POST['user'];
$pass = $_POST['pass'];
$destDir = $_POST['dir'];
$workDir = "/usr/local/temp"; // define this as per local system
// get temporary file name for the uploaded file
$tmpName = basename($_FILES['file']['tmp_name']);
// copy uploaded file into current directory
move_uploaded_file($_FILES['file']['tmp_name'], $workDir."/".$tmpName) or      die("Cannot move uploaded file to working directory");
// open connection
$conn = ftp_connect($host) or die ("Cannot initiate connection to host");
// send access parameters
ftp_login($conn, $user, $pass) or die("Cannot login");
// perform file upload
$upload = ftp_put($conn, $destDir."/".$_FILES['file']['name'], $workDir."/".$tmpName, FTP_BINARY);
// check upload status
// display message
if (!$upload) {
    echo "Cannot upload";
} else {
    echo "Upload complete";
}
// close the FTP stream
ftp_close($conn);
// delete local copy of uploaded file
unlink($workDir."/".$tmpName) or die("Cannot delete uploaded file from working directory -- manual deletion recommended");
?>

JavaScript
 
<?php// get FTP access parameters$host = $_POST['host'];$user = $_POST['user'];$pass = $_POST['pass'];$destDir = $_POST['dir'];$workDir = "/usr/local/temp"; // define this as per local system// get temporary file name for the uploaded file$tmpName = basename($_FILES['file']['tmp_name']);// copy uploaded file into current directorymove_uploaded_file($_FILES['file']['tmp_name'], $workDir."/".$tmpName) or      die("Cannot move uploaded file to working directory");// open connection$conn = ftp_connect($host) or die ("Cannot initiate connection to host");// send access parametersftp_login($conn, $user, $pass) or die("Cannot login");// perform file upload$upload = ftp_put($conn, $destDir."/".$_FILES['file']['name'], $workDir."/".$tmpName, FTP_BINARY);// check upload status// display messageif (!$upload) {    echo "Cannot upload";} else {    echo "Upload complete";}// close the FTP streamftp_close($conn);// delete local copy of uploaded fileunlink($workDir."/".$tmpName) or die("Cannot delete uploaded file from working directory -- manual deletion recommended");?>​

Answer

A quick and easy solution:

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Upload test</title>
    </head>
    <body>
        <form action="upload.php" method="post" enctype="multipart/form-data">
            File: <input type="file" name="file"/> 
            <input type="submit" value="Upload" />
        </form>
    </body>
</html>

JavaScript
 
<!DOCTYPE html><html>    <head>        <title>Upload test</title>    </head>    <body>        <form action="upload.php" method="post" enctype="multipart/form-data">            File: <input type="file" name="file"/>             <input type="submit" value="Upload" />        </form>    </body></html>​

upload.php

<?php
    if (isset($_FILES['file'])) {
        $file = $_FILES['file'];

        $file_name = $file['name'];
        $file_tmp = $file['tmp_name'];
        $file_size = $file['size'];
        $file_error = $file['error'];

        $file_ext = explode(".", $file_name);
        $file_ext = strtolower(end($file_ext));

        $allowed = array("epub", "pdf", "html"); //The extensions you allow

        if (in_array($file_ext, $allowed)) {
            if ($file_error === 0) {
                if ($file_size <= 2097152) {
                    $file_destination = ' '.$file_name; // If ' ', the file will be placed in this directory
                    if (move_uploaded_file($file_tmp, $file_destination)) {
                        echo $file_destination;
                    } else {
                        echo "An error has been encountered while moving your file!";
                    }
                } else {
                    echo "Your file is too big!";
                }
            } else {
                echo "An error has been encountered while uploading your file!";
            } 
        } else {
            echo "You can't upload files of this type!";
        }
    }
?>

JavaScript
 
<?php    if (isset($_FILES['file'])) {        $file = $_FILES['file'];​        $file_name = $file['name'];        $file_tmp = $file['tmp_name'];        $file_size = $file['size'];        $file_error = $file['error'];​        $file_ext = explode(".", $file_name);        $file_ext = strtolower(end($file_ext));​        $allowed = array("epub", "pdf", "html"); //The extensions you allow​        if (in_array($file_ext, $allowed)) {            if ($file_error === 0) {                if ($file_size <= 2097152) {                    $file_destination = ' '.$file_name; // If ' ', the file will be placed in this directory                    if (move_uploaded_file($file_tmp, $file_destination)) {                        echo $file_destination;                    } else {                        echo "An error has been encountered while moving your file!";                    }                } else {                    echo "Your file is too big!";                }            } else {                echo "An error has been encountered while uploading your file!";            }         } else {            echo "You can't upload files of this type!";        }    }?>​

Notes:
– $file_destination = ' '.$file_name; -> The ‘ ‘ represents in which directory after this one the file will be place in, so ‘ ‘ means that it will be placed in this directory, ‘test/’ means it will be placed in the test subdirectory of this directory, etc.

– If you want something more secure you could try this

– You could also look through one of these solutions

I’ve tried the script above and it seems to move the file but that file actually doesn’t exist in that directory.

So here’s an updated script that actually does work:

<?php
    if (isset($_FILES['file'])) {
        $host = "ftp.example.com";
        $user = "username";
        $pass = "password";
        $destDir = "/public_html";    //The destination directory for the uploaded file (`/public_html` is the root directory for your website files, in some cases it could also be `/var/www`)
        $workDir = " ";

        $tmpName = basename($_FILES['file']['tmp_name']);
        move_uploaded_file($_FILES['file']['tmp_name'], $workDir.$tmpName) or die("Cannot move uploaded file to working directory");

        $conn = ftp_connect($host) or die ("Cannot initiate connection to host");
        ftp_login($conn, $user, $pass) or die("Cannot login");
        $upload = ftp_put($conn, $destDir."/".$_FILES['file']['name'], $workDir.$tmpName, FTP_BINARY);
        if (!$upload) {
            echo "Cannot uploadn";
        } else {
            echo "Upload completen";
        }
        ftp_close($conn);

        unlink($workDir.$tmpName) or die("Cannot delete uploaded file from working directory -- manual deletion recommended");
    }
?>

JavaScript
 
<?php    if (isset($_FILES['file'])) {        $host = "ftp.example.com";        $user = "username";        $pass = "password";        $destDir = "/public_html";    //The destination directory for the uploaded file (`/public_html` is the root directory for your website files, in some cases it could also be `/var/www`)        $workDir = " ";​        $tmpName = basename($_FILES['file']['tmp_name']);        move_uploaded_file($_FILES['file']['tmp_name'], $workDir.$tmpName) or die("Cannot move uploaded file to working directory");​        $conn = ftp_connect($host) or die ("Cannot initiate connection to host");        ftp_login($conn, $user, $pass) or die("Cannot login");        $upload = ftp_put($conn, $destDir."/".$_FILES['file']['name'], $workDir.$tmpName, FTP_BINARY);        if (!$upload) {            echo "Cannot uploadn";        } else {            echo "Upload completen";        }        ftp_close($conn);​        unlink($workDir.$tmpName) or die("Cannot delete uploaded file from working directory -- manual deletion recommended");    }?>​

Advertisement

Answer