تگ فایل نمایش آپلود عکس برای چند تگ فایل

[koolfayfer 8]

سلام به همه دوستان

من اگه بخوام یه تگ آپلود فایل با یه باکس بزارم هنگامی که عکسی انتخاب میشه تو اون باکس نشون بده و دوباره روی تگ کلیک کنم و کنسل کنم که قاعدتا فایل انتخابی پاک میشه و باید در اون باکس هم پاک بشه

ای چیزی که من میخوام چند خطی کد نیازه اما مورد مهمش اینه اگه بخوام از این کپی بگیرم و به 6 تا اضافه کنم نمی تونم به صورت داینامیک کدشو بزنم بلکه باید دوباره برای هر کدوم آیدی و کلس مجزا استفاده کنم از نو فراخونی کنم

 

راهی هست که هر چند تا تگ فایل و باکس کپی بگیرم یا همون یه دستور اول ست در بیاد و نیاز نباشه چند بار کد های جی کوئری رو کپی کنم!؟

[Mobin 1,577]

هم میتونین از قابلیت چند انتخاب input file استفاده کنین هم اینکه میتونین یک دکمه بزارید که با کلیک یک باکس جدید ایجاد بشه

[koolfayfer 8]

 

ببینید من 6 تا تگ اینپوت میخوام + عکس تامنیلشون که قبل از آپلود نشون میده

اولی رو نوشتم که عکس رو نشون بده و در صورت کنسل عکس پاک بشه و ...

بعد از تگ های html یک کپی گرفتم همه استایل داشتن اما روی یکیشون تنها کار میکرد و اون یکی تداخل پیدا کرد

در نتیجه برای کدهای جی کوئری اومدم جدا جدا برای هر 6 تا نوشتم که اصلا کار منطقی نیست!

تنها میخوام کد های جی کوئریم یکی باشه اما هر چی از این تگ ها کپی کردم اون توابع روش اعمال بشه!

[Mobin 1,577]

کدهای html همین بخش و jquery اونو اینجا قرار بدین

[koolfayfer 8]

<div class="upload-box">
                                        <label>تصاویر آگهی</label>
                                        <span class="span-fine-upload">فرمت های مجاز jpg , jpeg , png , gif</span>
                                        
                                        <div id="fine-uploader-gallery">
                                        
                                        
                                        	<div class="bg-custom-input-file">
                                            
                                            	<div class="custom-input-file-box">
        	<div class="custom-input-file-img-block">
            	<img id="image1" src="images/no-img.jpg" alt="your image">
                <button class="delete-upload-file" type="button" id="delete1">حذف تصویر</button>
            </div>
        	<input class="insert-ads-file" type="file" id="files1" accept=".jpg,.png,.gif,.jpeg">
        </div>
        
                                                <div class="custom-input-file-box">
                                                    <div class="custom-input-file-img-block">
                                                        <img id="image2" src="images/no-img.jpg" alt="your image">
                                                        <button class="delete-upload-file" type="button" id="delete2">حذف تصویر</button>
                                                    </div>
                                                    <input class="insert-ads-file" type="file" id="files2" accept=".jpg,.png,.gif,.jpeg">
                                                </div>
                                                
                                                <div class="custom-input-file-box">
                                                    <div class="custom-input-file-img-block">
                                                        <img id="image3" src="images/no-img.jpg" alt="your image">
                                                        <button class="delete-upload-file" type="button" id="delete3">حذف تصویر</button>
                                                    </div>
                                                    <input class="insert-ads-file" type="file" id="files3" accept=".jpg,.png,.gif,.jpeg">
                                                </div>
                                                
                                                <div class="custom-input-file-box">
                                                    <div class="custom-input-file-img-block">
                                                        <img id="image4" src="images/no-img.jpg" alt="your image">
                                                        <button class="delete-upload-file" type="button" id="delete4">حذف تصویر</button>
                                                    </div>
                                                    <input class="insert-ads-file" type="file" id="files4" accept=".jpg,.png,.gif,.jpeg">
                                                </div>
                                                
                                                <div class="custom-input-file-box">
                                                    <div class="custom-input-file-img-block">
                                                        <img id="image5" src="images/no-img.jpg" alt="your image">
                                                        <button class="delete-upload-file" type="button" id="delete5">حذف تصویر</button>
                                                    </div>
                                                    <input class="insert-ads-file" type="file" id="files5" accept=".jpg,.png,.gif,.jpeg">
                                                </div>
                                                
                                                <div class="custom-input-file-box">
                                                    <div class="custom-input-file-img-block">
                                                        <img id="image6" src="images/no-img.jpg" alt="your image">
                                                        <button class="delete-upload-file" type="button" id="delete6">حذف تصویر</button>
                                                    </div>
                                                    <input class="insert-ads-file" type="file" id="files6" accept=".jpg,.png,.gif,.jpeg">
                                                </div>
                                            
                                            </div>
                                        
                                        
                                        
                                        </div>
                                    
                                        
                                    
                                    </div>

// Custom Input File
document.getElementById("files1").onchange = function () {
    var reader = new FileReader();

    reader.onload = function (e) {
        // get loaded data and render thumbnail.
        document.getElementById("image1").src = e.target.result;
    };

    // read the image file as a data URL.
    reader.readAsDataURL(this.files[0]);
};

document.getElementById("files2").onchange = function () {
    var reader = new FileReader();

    reader.onload = function (e) {
        // get loaded data and render thumbnail.
        document.getElementById("image2").src = e.target.result;
    };

    // read the image file as a data URL.
    reader.readAsDataURL(this.files[0]);
};

document.getElementById("files3").onchange = function () {
    var reader = new FileReader();

    reader.onload = function (e) {
        // get loaded data and render thumbnail.
        document.getElementById("image3").src = e.target.result;
    };

    // read the image file as a data URL.
    reader.readAsDataURL(this.files[0]);
};

document.getElementById("files4").onchange = function () {
    var reader = new FileReader();

    reader.onload = function (e) {
        // get loaded data and render thumbnail.
        document.getElementById("image4").src = e.target.result;
    };

    // read the image file as a data URL.
    reader.readAsDataURL(this.files[0]);
};

document.getElementById("files5").onchange = function () {
    var reader = new FileReader();

    reader.onload = function (e) {
        // get loaded data and render thumbnail.
        document.getElementById("image5").src = e.target.result;
    };

    // read the image file as a data URL.
    reader.readAsDataURL(this.files[0]);
};

document.getElementById("files6").onchange = function () {
    var reader = new FileReader();

    reader.onload = function (e) {
        // get loaded data and render thumbnail.
        document.getElementById("image6").src = e.target.result;
    };

    // read the image file as a data URL.
    reader.readAsDataURL(this.files[0]);
};

$( "#delete1" ).click(function() {
  $('#files1').val('');
  document.getElementById("image1").src = "images/no-img.jpg";
});
$( "#delete2" ).click(function() {
  $('#files2').val('');
  document.getElementById("image2").src = "images/no-img.jpg";
});
$( "#delete3" ).click(function() {
  $('#files3').val('');
  document.getElementById("image3").src = "images/no-img.jpg";
});
$( "#delete4" ).click(function() {
  $('#files4').val('');
  document.getElementById("image4").src = "images/no-img.jpg";
});
$( "#delete5" ).click(function() {
  $('#files5').val('');
  document.getElementById("image5").src = "images/no-img.jpg";
});
$( "#delete6" ).click(function() {
  $('#files6').val('');
  document.getElementById("image6").src = "images/no-img.jpg";
});

کد رو ببینید

اصلا خنده داره!

[koolfayfer 8]

دوستان کسی کمک بکنه

[Mobin 1,577]

بهتره از jquery استفاده کنی تا بتونی از کلاسها بجای ایدی استفاده کنی

اینجوری نیاز نیست یه کد رو برای هر بلاک تکرار کنی

[koolfayfer 8]

خوب استاد عزیز مشکل اینجاست که من جی کوئری زیاد نمی دونم!

اگه محبت کنی کمک کنی ان شا الله بتونم جبران کنم

[Mobin 1,577]

میتونین از اسکریپت زیر استفاده کنید

جی کوئری رو قبلش لود کنید

 

<script type="text/javascript">
var img = null;

jQuery('body').on('change','.insert-ads-file',function(){

            img = jQuery(this).closest('.custom-input-file-box').find('img')
            var reader = new FileReader();
            reader.onload = function (e) {
                img.attr('src', e.target.result).height(200);
            };
            reader.readAsDataURL(jQuery(this)[0].files[0]);

});

jQuery('body').on('click','.delete-upload-file',function(){
    jQuery(this).prev('img').attr('src','images/no-img.jpg');
});
</script>