display image with file upload

Solutions on MaxInterview for display image with file upload by the best coders in the world

Search
showing results for - "display image with file upload"
Bear
21 Feb 2017
1<head>
2<title>Image Upload</title>
3<style>
4  body {
5    margin:0px;
6  }
7
8  .center {
9    display:inline;
10    margin: 3px;
11  }
12
13  .form-input {
14    width:100px;
15    padding:3px;
16    background:#fff;
17    border:2px dashed dodgerblue;
18  }
19  .form-input input {
20    display:none;
21  }
22  .form-input label {
23    display:block;
24    width:100px;
25    height: auto;
26    max-height: 100px;
27    background:#333;
28    border-radius:10px;
29    cursor:pointer;
30  }
31
32  .form-input img {
33    width:100px;
34    height: 100px;
35    margin: 2px;
36    opacity: .4;
37  }
38
39  .imgRemove{
40    position: relative;
41    bottom: 114px;
42    left: 68%;
43    background-color: transparent;
44    border: none;
45    font-size: 30px;
46    outline: none;
47  }
48  .imgRemove::after{
49    content: ' \21BA';
50    color: #fff;
51    font-weight: 900;
52    border-radius: 8px;
53    cursor: pointer;
54  }
55  .small{
56    color: firebrick;
57  } 
58  </style>
59
60</head>
61
62<body>
63
64   <div class="image-upload-one">
65     <div class="center">
66       <div class="form-input">
67         <label for="file-ip-1">
68           <img id="file-ip-1-preview" src="https://i.ibb.co/ZVFsg37/default.png">
69           <button type="button" class="imgRemove" onclick="myImgRemoveFunctionOne()"></button>
70         </label>
71         <input type="file"  name="img_one" id="file-ip-1" accept="image/*" onchange="showPreviewOne(event);">
72       </div>
73       <small class="small">Use the &#8634; icon to reset the image</small>
74     </div>
75   </div>
76    
77  <script>
78
79    function showPreviewOne(event){
80      if(event.target.files.length > 0){
81        let src = URL.createObjectURL(event.target.files[0]);
82        let preview = document.getElementById("file-ip-1-preview");
83        preview.src = src;
84        preview.style.display = "block";
85      } 
86    }
87    function myImgRemoveFunctionOne() {
88      document.getElementById("file-ip-1-preview").src = "https://i.ibb.co/ZVFsg37/default.png";
89    }
90
91  </script>
92   
93</body>
source
similar questions
how to upload image in htmlfile upload preview in htmlupload picturepreview image before upload
queries leading to this page
upload image uploadhtml imgshow uploaded imageimage upload file attributesdisplay preview of image upload 3cimg 3ehtml img tagwhat is the meaning of an image tagimgimage tags htmlimage tag in htmlhtml image taghtml img withupload images with previewimage tag htmlimage upload with 21 5b 5d get image src from file uploaderfile upload show imageupload image filedisplay image during uploadimg htmlupload file on image clickimg tag in htmlimg html tagupload a image when its loadedupload an image filefiled upload image on pagetag img htmlimg attributestag imageimage tag syntaxtag picture htmlimage upload and get urlimage taghtml img tag propertyupload image displayinghtml5 image tagupload picture and displayhtml tag imageuse file upload where images are storedimage file uploader previewwhen upload imge show file fieldimg tag htmlim tag htmltag image htmlimg tag attributesimage url uploadtags used in imgimg modelshtml picture tagdisplay image with file upload