First make a folder named, “upload-image”. Under “upload-image”, create another folder for the image, named “image” where my image will show after upload. Show
Step 21. Create a file named, “index.php” and save under “upload-image”. <script> function uploadpic(pic){ document.getElementById("image").setAttribute('src',pic); } </script>
3. Next, under <body> tag, write down the following code: <form id="form" method="post" action="upload.php" enctype="multipart/form-data" target="iframe"> <input type="file" id="file" name="file"><br><br> <input type="submit" id="submit" name="submit" value="Submit"><br> </form> <p id="message">Message will show here</p> <img id="image" name="image" style="min-height:120;min-width:200;max-height:120px;”> <iframe id="iframe" style="display:none;" name="iframe"></iframe> Step 31. Now, create a new file named, “upload.php” and save under “upload-image”. <?php if($_FILES['file']['size']>0){ if($_FILES['file']['size']<=183400) { if(move_uploaded_file($_FILES['file']['tmp_name'],'img/'.$_FILES['file']['name'])) { ?> <script type="text/javascript"> parent.document.getElementById("message").innerHTML=""; parent.document.getElementById("file").value=""; window.parent.uploadpic("<?php echo 'img/'.$_FILES['file']['name'];?>") </script> <?php } else { ?> <script type="text/javascript"> parent.document.getElementById("message").innerHTML='<font color="#dedeff">file upload error</font>'; </script> <?php } } else { ?> <script type="text/javascript">alert('$file size is too big'); parent.document.getElementById("message").innerHTML='<font color="#dedeff">file size is too big</font>'; </script> <?php } } ?> Now, run the file. Before running the file, make sure the local server is running otherwise, we’ll not able to show the PHP page. After successfully uploading the image, go to “image” folder, here we see the uploaded image.
*** For Linux users,After following all the steps, if the image can’t display in the page, then go to the Terminal and take permission for the folder. To preview an image before and after upload, you need to try the following code − HTML The following is the jQuery − function display(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function(event) { $('#myid').attr('src', event.target.result); } reader.readAsDataURL(input.files[0]); } } $("#demo").change(function() { display(this); }); In this article, I will give you a step-by-step walkthrough for selecting an image from the client machine and displaying the preview of the selected image inside an HTML element. All of these will happen with the help of HTML, JavaScript, and CSS (for designing the element where the preview will be shown). 3 Steps To Preview an Image
Step 1: Create a Basic Layout for the Image Preview Using HTML Add a div element with a class named Add the following code snippet to the file where you want to display the image preview and save it. Step 2: Design the Image Preview Section Using CSS Now, we need to design the section where the preview of the image will be shown. Add the following code snippet to a Step 3: Display the Preview of the Image Using JavaScript Now, we need to create an arrow function that will capture the selected image and display the preview of it. Refer to the following code snippet to understand how to show the image preview using JavaScript. Outcome Kudos! You have completed learning how to preview an image using JavaScript in 3 easy steps.
|