Versuch, div nach dem Hochladen der Datei zu verschieben

Question

Ich möchte den Dateiupload div neben dem Bild nach dem Hochladen verschieben. Das Hochladen des Bildes funktioniert, aber ich kann das Datei-Upload-Div nicht an eine andere Stelle als das Bild verschieben. Es blieb wie fix block div ohne div bewegen. Wie kann ich das tun? Bitte helfen Sie mir.

function handleFileSelect(evt) { 
 
    var files = evt.target.files; // FileList object 
 

 
    // Loop through the FileList and render image files as thumbnails. 
 
    for (var i = 0, f; f = files[i]; i++) { 
 

 
    // Only process image files. 
 
    if (!f.type.match('image.*')) { 
 
     continue; 
 
    } 
 

 
    var reader = new FileReader(); 
 

 
    // Closure to capture the file information. 
 
    reader.onload = (function(theFile) { 
 
     return function(e) { 
 
     // Render thumbnail. 
 
     var span = document.createElement('span'); 
 
     span.innerHTML = ['<img class="thumb" src="', e.target.result, 
 
      '" title="', escape(theFile.name), '"/>' 
 
     ].join(''); 
 
     document.getElementById('previewImg').insertBefore(span, null); 
 
     }; 
 
    })(f); 
 

 
    // Read in the image file as a data URL. 
 
    reader.readAsDataURL(f); 
 
    } 
 
} 
 

 
document.addEventListener('DOMContentLoaded', function() { 
 
    document.getElementById('files').addEventListener('change', handleFileSelect, false); 
 
}, false);

.dialog-circle { 
 
    width: 210px; 
 
    height: 130px; 
 
    background-color: rgb(44, 108, 128); 
 
} 
 

 
#dialog-horizontal-plus { 
 
    position: relative; 
 
    background-color: #FFFFFF; 
 
    width: 19%; 
 
    height: 3%; 
 
    left: 40%; 
 
    top: 42.75%; 
 
} 
 

 
.dialog-vertical-plus { 
 
    position: relative; 
 
    background-color: #FFFFFF; 
 
    width: 2%; 
 
    height: 20%; 
 
    left: 49%; 
 
    top: 30.5%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type='file' id="files" name="image" multiple="multiple" style="display:none" /> 
 
<div id='previewImg'></div> 
 
<div class='dialog-circle' style="display:block;" onclick="document.getElementById('files').click()"> 
 
    <div id='dialog-horizontal-plus'></div> 
 
    <div id='previewImg' class='dialog-vertical-plus'></div> 
 
</div>

Answer 1

Sie benötigen eine gewisse width für #previewImg span einzustellen stellen Sie dann float: left auch auf .dialog-circle

function handleFileSelect(evt) { 
 
    var files = evt.target.files; // FileList object 
 

 
    // Loop through the FileList and render image files as thumbnails. 
 
    for (var i = 0, f; f = files[i]; i++) { 
 

 
    // Only process image files. 
 
    if (!f.type.match('image.*')) { 
 
     continue; 
 
    } 
 

 
    var reader = new FileReader(); 
 

 
    // Closure to capture the file information. 
 
    reader.onload = (function(theFile) { 
 
     return function(e) { 
 
     // Render thumbnail. 
 
     var span = document.createElement('span'); 
 
     span.innerHTML = ['<img class="thumb" src="', e.target.result, 
 
      '" title="', escape(theFile.name), '"/>' 
 
     ].join(''); 
 
     document.getElementById('previewImg').insertBefore(span, null); 
 
     }; 
 
    })(f); 
 

 
    // Read in the image file as a data URL. 
 
    reader.readAsDataURL(f); 
 
    } 
 
} 
 

 
document.addEventListener('DOMContentLoaded', function() { 
 
    document.getElementById('files').addEventListener('change', handleFileSelect, false); 
 
}, false);

.dialog-circle { 
 
    width: 210px; 
 
    height: 130px; 
 
    background-color: rgb(44, 108, 128); 
 
    float: left; 
 
} 
 
#dialog-horizontal-plus { 
 
    position: relative; 
 
    background-color: #FFFFFF; 
 
    width: 19%; 
 
    height: 3%; 
 
    left: 40%; 
 
    top: 42.75%; 
 
} 
 

 
.dialog-vertical-plus { 
 
    position: relative; 
 
    background-color: #FFFFFF; 
 
    width: 2%; 
 
    height: 20%; 
 
    left: 49%; 
 
    top: 30.5%; 
 
} 
 

 
#previewImg span { 
 
    display: inline-block; 
 
    width: 200px; 
 
    float: left; 
 
} 
 

 
#previewImg span img { 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type='file' id="files" name="image" multiple="multiple" style="display:none" /> 
 

 
<div class='dialog-circle' style="display:block;" onclick="document.getElementById('files').click()"> 
 
    <div id='dialog-horizontal-plus'></div> 
 
    <div class='dialog-vertical-plus'></div> 
 
</div> 
 

 
<div id='previewImg'></div>