ファイルのアップロード後にdivを移動しようとしました

Question

アップロード後にファイルのアップロードdivを画像の横に移動したいとします。イメージのアップロードは機能しますが、ファイルのアップロードdivをイメージ以外の場所に移動することはできません。それはdivを動かさずにfix block divのようにとどまった。どうすればいいですか？私を助けてください。

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

あなたは、二重 `＃previewImg`を持っなぜ、.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>