将类选择器更改为jQuery中的ID选择

Question

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.

Answer 1

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.