CODEWITHSUNDEEP
javascripthtmlcss
Adel kanso
Adel kanso

Reputation: 23

How can I upload and display file to html

I'm trying to upload files to my html and display it, need something like an attachment, I choose my file (image,text,pdf,excel...) and display it.

I have already tried this code but it only show the text name I need something like it but also display content:

<!DOCTYPE html>
<html>
<body>

<p>Click the button to create a File Upload Button.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  var x = document.createElement("INPUT");
  x.setAttribute("type", "file");
  document.body.appendChild(x);
}
</script>

</body>
</html>

Upvotes: 0

Views: 4332

Answers (3)

Ronanki Viswanadham
Ronanki Viswanadham

Reputation: 108

    <html>
      <head>
      </head>

      <body>
        <input name="file" type="file" id="file"/>
        <img id="preview" />
        <script>
                  $(function()
{
   $("#file").on('change', function(){
   // Display image on the page for viewing
        readURL(this,"preview");

   });
});

function readURL(input , tar) {  
    if (input.files && input.files[0]) { // got sth

    // Clear image container
    $("#" + tar ).removeAttr('src'); 

    $.each(input.files , function(index,ff)  // loop each image 
    {

        var reader = new FileReader();

        // Put image in created image tags
        reader.onload = function (e) {
            $('#' + tar).attr('src', e.target.result);
        }

        reader.readAsDataURL(ff);

    });
    }
}
        </script>

      </body>
    </html>

Upvotes: 0

Shawn Vn
Shawn Vn

Reputation: 297

Your question isn't really clear, but for uploading a file you need a server-side language and If you want to show your uploaded file you have to send the file via AJAX to a server-side language (like PHP, Node.js, Python and etc.)
something like this :

<!DOCTYPE html>
<html>
<head>
<script>
function uploadFile(){
    let file = document.getElementById("file1").files[0];
    // alert(file.name+" | "+file.size+" | "+file.type);
    let formdata = new FormData();
    formdata.append("file1", file);
    let ajax = new XMLHttpRequest();
    ajax.upload.addEventListener("progress", progressHandler, false);
    ajax.addEventListener("load", completeHandler, false);
    ajax.addEventListener("error", errorHandler, false);
    ajax.addEventListener("abort", abortHandler, false);
    ajax.open("POST", "upload.php");
    ajax.send(formdata);
}
function progressHandler(event){
   //show upload progress
}
function completeHandler(event){
   let tmp = document.getElementById('showImg');
   tmp.style.backgroundImage = "url('"+tmp+"')"
}
function errorHandler(event){
    //error handler
}
function abortHandler(event){
    //abort handler
}
</script>
</head>
<body>
<form id="upload_form" enctype="multipart/form-data" method="post">
  <input type="file" name="file1" id="file1"><br>
  <input type="button" value="Upload File" onclick="uploadFile()">
  <div id="showImg"></div>
</form>
</body>
</html>

upload.php :

$fileName = $_FILES["file1"]["name"]; // The file name
$fileTmpLoc = $_FILES["file1"]["tmp_name"]; // File in the PHP tmp folder
$fileType = $_FILES["file1"]["type"]; // The type of file it is
$fileSize = $_FILES["file1"]["size"]; // File size in bytes
$fileErrorMsg = $_FILES["file1"]["error"]; // 0 for false... and 1 for true
if (!$fileTmpLoc) { // if file not chosen
    echo "ERROR: Please browse for a file before clicking the upload button.";
    exit();
}
if(move_uploaded_file($fileTmpLoc, "test_uploads/$fileName")){
    echo "test_uploads/$fileName";
} else {
    echo "move_uploaded_file function failed";
}

P.s : Styling isn't really great in this example you can append an img tag or something else, It's just an example for you to understand the concept
Hope this helps you

Upvotes: 1

sao
sao

Reputation: 1821

I have a resume on my personal site for example, its a PDF document.

I just linked to it with an anchor tag

<html>
<a href="docs/Resume.pdf" target="new">Resume</a>

</html>

Hope this helps. let me know if you have other questions and welcome to StackOverflow

Upvotes: 0

Related Questions