رفتن به مطلب

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


پست های پیشنهاد شده

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

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

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

 

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

لینک به ارسال

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

لینک به ارسال

input.jpg.ab21ff2a2daebd2cd311bb7e9587adf2.jpg

 

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

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

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

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

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

لینک به ارسال
<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";
});

کد رو ببینید

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

لینک به ارسال

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

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

لینک به ارسال

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

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

لینک به ارسال
  • 2 هفته بعد...

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

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

 

<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>

 

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...