مرجع تخصصی برنامه نویسان

انجمن تخصصی برنامه نویسان فارسی زبان

کاربر سایت

arezoo.fg

عضویت از 1394/08/11

راهنمایی برای multi image upload

  • سه شنبه 13 مهر 1395
  • 12:24
تشکر میکنم

سلام به همه .

این یه برنامست که از jsfiddle برای آپلود عکس برداشتم اما من میخوام عکس جدید که آپلود میشه در کنار عکس قبلی باشه و قبلی حذف نشه..

کدهاش و قرار دادم.

$(document).ready(function() {

    
    var readURL = function(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('.profile-pic').attr('src', e.target.result);
            }
    
            reader.readAsDataURL(input.files[0]);
        }
    }
    

    $(".file-upload").on('change', function(){
        readURL(this);
    });
    
    $(".upload-button").on('click', function() {
       $(".file-upload").click();
    });
});

html:

<img class="profile-pic" src="http://cdn.cutestpaw.com/wp-content/uploads/2012/07/l-Wittle-puppy-yawning.jpg" />
<div class="upload-button">Upload Image</div>
<input class="file-upload" type="file" accept="image/*"/>

 

css:

.upload-button {
    padding: 4px;
    border: 1px solid black;
    border-radius: 5px;
    display: block;
    float: left;
}

.profile-pic {
    max-width: 200px;
    max-height: 200px;
    display: block;
}

.file-upload {
    display: none;
}

 

 

 

همچنین لینک کد در jsfifddle  هم اینه :https://jsfiddle.net/2b7dD/485/

 

پاسخ های این پرسش

تعداد پاسخ ها : 0 پاسخ
در حال حاضر هیچ پاسخی ارسال نشده است
کاربرانی که از این پست تشکر کرده اند

هیچ کاربری تا کنون از این پست تشکر نکرده است

اگر نیاز به یک مشاور در زمینه طراحی سایت ، برنامه نویسی و بازاریابی الکترونیکی دارید

با ما تماس بگیرید تا در این مسیر همراهتان باشیم :)