koolfayfer

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

9 پست در این موضوع قرار دارد

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

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

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

 

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

0

به اشتراک گذاری این پست


لینک به پست

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

1

به اشتراک گذاری این پست


لینک به پست

input.jpg.ab21ff2a2daebd2cd311bb7e9587adf2.jpg

 

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

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

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

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

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

0

به اشتراک گذاری این پست


لینک به پست

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

0

به اشتراک گذاری این پست


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

کد رو ببینید

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

0

به اشتراک گذاری این پست


لینک به پست

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

0

به اشتراک گذاری این پست


لینک به پست

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

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

1

به اشتراک گذاری این پست


لینک به پست

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

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

0

به اشتراک گذاری این پست


لینک به پست

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

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

 

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

 

1

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

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

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری

  • مطالب مشابه

    • توسط SadraHkm
      سلام دوستان
      امیدوارم حالتون خوب باشه
      لطفا یه نگاهی به کد زیر بندازید
      <p>Paragraph 1</p> <p>Paragraph 2</p> <p>Paragraph 3</p> <p>Paragraph 4</p> <button id="calcBtn">Calculate</button> <div id="result"></div> <script> $(window).ready(function () { $('#calcBtn').click(function (e) { $('p').each(function () { $(this).css('color','rgb('+ rand(0,255) +','+ rand(0,255) +','+ rand(0,255) +')'); $('#result').append($(this).html()); // ----------------- This Code : //$('#result').append($(this)); }) }); }) </script> در اون قسمتی از کد که دارم محتوی کدهای پاراگراف رو به تگ div اضافه میکنم یه سوالی ذهن منو مشغول کرده.
      اگر همین کدی که الان هست رو اجرا کنیم، جی کوئری هربار توی حلقه رنگ تگ اصلی رو تغییر میده و یه کپی از اون پاراگراف میگیره و اضافه میکنه به div.
      ولی اگه اون تکه کدی که کامنت هست رو با اون خط جایگزین کنیم، میاد و هر بار کلا تگ پاراگراف رو برمیداره و اضافش میکنه به div. یعنی دیگه کپی ازش نمیگیره و دیگه تگ های p اون بالا باقی نمیموند.
      میخواستم ببینم آیا من درست فهمیدم ؟ یا مشکلی توی کد هست که اینجوری اجرا میشه ؟!
      باتشکر فراوان
       
    • توسط صدرا
      سلام
      فکر میکنم من هیچ تغییری در کدها و افزونه‌ها و تنظیمات انجام ندادم. ولی حالا بعد از یک ماه از آخرین فعالیتم در وب‌سایت، موقع آپلود عکس، خطای "گم شدن یک پوشهٔ موقت" یا "Missing a temporary folder" میدهد.
      لطفا راهنمایی کنید.
    • توسط unid_user
      سلام و درود
      دوستان گرامی، می خوام با کلیک کردن روی یه تگ a هر بار سه تا از تگ های div که کلاس items رو دارن نمایش داده بشه یا به اصطلاح laod بشه.
      شبیه این دکمه توی سایت ها زیاد دیدم و لی آموزش هایی که دربارش هست برای من زیاد مناسب نیست و نتونستم درست کنم.
      با تشکر و سپاس
    • توسط unid_user
      سلام و درود
      دوستان گرامی ، می خوام یه منوی آکاردئونی ساده با جی کوئری ایجاد کنم که وقتی روی هر کدوم از آیتم های منو کلیک میکنی، زیر منوی سایر آیتم ها بسته بشه.
      <nav> <ul id="first-ul"> <li> <a>صفحه اصلی</a> </li> <li> <a>خدمات</a> <ul class="second-ul"> <li> <a>آموزش رباتیک</a> </li> <li> <a>طراحی و ساخت ربات</a> </li> </ul> </li> <li> <a>محصولات</a> <ul class="second-ul"> <li> <a>ربات مسیریاب</a> </li> <li> <a>ربات حل ماز</a> </li> </ul> </li> </ul> </nav> با تشکر و سپاس
    • توسط jistili1
      سلام دوستان.من یک select box دارم و قرار بر اینه که به ازای هر مقدار select box یک div خاص نمایش داده بشه و بقیه div های مربوط به مقادیر دیگر select box مخفی بشن.
      این کد جی کوئری من هست:
      $("#select").change(function(){ if($(this).val()=="empty"){ $("#date").css("display","hidden"); $("#localref").css("display","hidden"); $("#refid").css("display","hidden"); $("#number").css("display","hidden"); $("#product").css("display","hidden"); $("#price").css("display","hidden"); } if($(this).val()=="localref"){ $("#date").css("display","hidden"); $("#localref").css("display","block"); $("#refid").css("display","hidden"); $("#number").css("display","hidden"); $("#product").css("display","hidden"); $("#price").css("display","hidden"); } if($(this).val()=="date"){ $("#date").css("display","block"); $("#localref").css("display","hidden"); $("#refid").css("display","hidden"); $("#number").css("display","hidden"); $("#product").css("display","hidden"); $("#price").css("display","hidden"); } if($(this).val()=="price"){ $("#date").css("display","hidden"); $("#localref").css("display","hidden"); $("#refid").css("display","hidden"); $("#number").css("display","hidden"); $("#product").css("display","hidden"); $("#price").css("display","block"); } if($(this).val()=="number"){ $("#date").css("display","hidden"); $("#localref").css("display","hidden"); $("#refid").css("display","hidden"); $("#number").css("display","block"); $("#product").css("display","hidden"); $("#price").css("display","hidden"); } if($(this).val()=="product"){ $("#date").css("display","hidden"); $("#localref").css("display","hidden"); $("#refid").css("display","hidden"); $("#number").css("display","hidden"); $("#product").css("display","block"); $("#price").css("display","hidden"); } if($(this).val()=="refid"){ $("#date").css("display","hidden"); $("#localref").css("display","hidden"); $("#refid").css("display","block"); $("#number").css("display","hidden"); $("#product").css("display","hidden"); $("#price").css("display","hidden"); } }); حالا مشکل من اینجاست که فرض کنید من از توی select box ، مقدار date رو انتخاب کردم.خب تا اینجا درست کار میکنه و div مربوط به date برای من نمایش داده میشه.حالا اگه روی مقدار empty کلیک کنم ، طبق کد باید تمامی div ها مخفی بشن ولی این اتفاق نمیفته.حالا من از select box مقدار date رو انتخاب کردم و div مربوط به date برام نمایش داده میشه اگه بعدش روی گزینه localref کلیک کنم ، div مربوط به localref نمایش داده میشه ولی div مربوط به date مخفی نمیشه.ممنون میشم کمکم کنید که بفهمم مشکل از کجاست.