I have some input type="file"
with which the user can publish images. There will be multiple input
so I have to change this script, previously formed from a single input so created with a class selector , to a multiple input
. I thought to put the id. But it doesn't work yet. Why?
function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function(e) { $('.image-upload-wrap').hide(); $('.file-upload-image').attr('src', e.target.result); $('.file-upload-content').show(); $('.image-title').html(input.files[0].name); }; reader.readAsDataURL(input.files[0]); } else { removeUpload(); } } function removeUpload() { $('.file-upload-input').replaceWith($('.file-upload-input').clone()); $('.file-upload-content').hide(); $('.image-upload-wrap').show(); } $('.image-upload-wrap').bind('dragover', function () { $('.image-upload-wrap').addClass('image-dropping'); }); $('.image-upload-wrap').bind('dragleave', function () { $('.image-upload-wrap').removeClass('image-dropping'); });
body { font-family: sans-serif; background-color: #eeeeee; } .file-upload { background-color: #ffffff; width: 600px; margin: 0 auto; padding: 20px; } .file-upload-btn { width: 100%; margin: 0; color: #fff; background: #1FB264; border: none; padding: 10px; border-radius: 4px; border-bottom: 4px solid #15824B; transition: all .2s ease; outline: none; text-transform: uppercase; font-weight: 700; } .file-upload-btn:hover { background: #1AA059; color: #ffffff; transition: all .2s ease; cursor: pointer; } .file-upload-btn:active { border: 0; transition: all .2s ease; } .file-upload-content { display: none; text-align: center; } .file-upload-input { position: absolute; margin: 0; padding: 0; width: 100%; height: 100%; outline: none; opacity: 0; cursor: pointer; } .image-upload-wrap { margin-top: 20px; border: 4px dashed #D2D2D2; position: relative; } .image-dropping, .image-upload-wrap:hover { background-color: #1FB264; border: 4px dashed #D2D2D2; } .image-title-wrap { padding: 0 15px 15px 15px; color: #222; } .drag-text { text-align: center; } .drag-text h3 { font-weight: 100; text-transform: uppercase; color: #15824B; padding: 60px 0; } .file-upload-image { max-height: 200px; max-width: 200px; margin: auto; padding: 20px; } .remove-image { width: 200px; margin: 0; color: #fff; background: #cd4535; border: none; padding: 10px; border-radius: 4px; border-bottom: 4px solid #b02818; transition: all .2s ease; outline: none; text-transform: uppercase; font-weight: 700; } .remove-image:hover { background: #c13b2a; color: #ffffff; transition: all .2s ease; cursor: pointer; } .remove-image:active { border: 0; transition: all .2s ease; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="file-upload"> <button class="file-upload-btn" type="button" onclick="$('#1').trigger( 'click' )">Add Image</button> <div class="image-upload-wrap" id="1"> <input class="file-upload-input" type='file' onchange="readURL(this);" accept="image/*" /> <div class="drag-text"> <h3>Drag and drop a file or select add Image</h3> </div> </div> <div class="file-upload-content"> <img class="file-upload-image" src="#" alt="your image" /> <div class="image-title-wrap"> <button type="button" onclick="removeUpload()" class="remove-image">Remove <span class="image-title">Uploaded Image</span></button> </div> </div> <button class="file-upload-btn" type="button" onclick="$('#2').trigger( 'click' )">Add Image</button> <div class="image-upload-wrap" id="2"> <input class="file-upload-input" type='file' onchange="readURL(this);" accept="image/*" /> <div class="drag-text"> <h3>Drag and drop a file or select add Image</h3> </div> </div> <div class="file-upload-content"> <img class="file-upload-image" src="#" alt="your image" /> <div class="image-title-wrap"> <button type="button" onclick="removeUpload()" class="remove-image">Remove <span class="image-title">Uploaded Image</span></button> </div> </div> <button class="file-upload-btn" type="button" onclick="$('#3').trigger( 'click' )">Add Image</button> <div class="image-upload-wrap" id="3"> <input class="file-upload-input" type='file' onchange="readURL(this);" accept="image/*" /> <div class="drag-text"> <h3>Drag and drop a file or select add Image</h3> </div> </div> <div class="file-upload-content"> <img class="file-upload-image" src="#" alt="your image" /> <div class="image-title-wrap"> <button type="button" onclick="removeUpload()" class="remove-image">Remove <span class="image-title">Uploaded Image</span></button> </div> </div> <button class="file-upload-btn" type="button" onclick="$('#4').trigger( 'click' )">Add Image</button> <div class="image-upload-wrap" id="4"> <input class="file-upload-input" type='file' onchange="readURL(this);" accept="image/*" /> <div class="drag-text"> <h3>Drag and drop a file or select add Image</h3> </div> </div> <div class="file-upload-content"> <img class="file-upload-image" src="#" alt="your image" /> <div class="image-title-wrap"> <button type="button" onclick="removeUpload()" class="remove-image">Remove <span class="image-title">Uploaded Image</span></button> </div> </div> </div>
Currently, as you can see, if you upload a photo will be equal in all other fields.
You have to make your code relevant to the container of the image you are engaged with. Currently you change looks of all elements with same class and therefore see same thing in all containers.
Check demo - Fiddle
For your onload
function use this:
reader.onload = function(e) {
var $parent = $(input).parent(),
$nextEl = $parent.next();
$parent.hide();
$nextEl.find('.file-upload-image').attr('src', e.target.result);
$nextEl.show();
$nextEl.find('.image-title').html(input.files[0].name);
};
For your removeUpload
function use this:
function removeUpload(button) {
var $parent = $(button).parent().parent();
$parent.hide();
$parent.prev().show();
}
And change the onclick function call for remove buttons to onclick="removeUpload(this)"
to pass the clicked button to function.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.