مهسا
3 سال پیش توسط مهسا مطرح شد
11 پاسخ

ساخت آرایه جدید وقتی کلیک شد

سلام میشه کمکم کنید؟ من میخوام که هر بااااار که کاربر روی دکمه ذخیره کلیک کرد یه آرایه جدید بسازه و مقدار input ها رو داخلش قرار بده. و همین آرایه رو بزاره داخل خونه 0 یک آرایه . دوباره که کاربر کلیک میکنه بیاد باز مقدار input هارو تو یه آرایه جدید بریزه نه همون آرایه قبلی.و به همین ترتیب خونه 2و3و.... تو هر خونش یه آرایه از مقدارای input باشه
اینم کدامه که اشتباهه. کد من میاد وقتی دوباره و دوباره کلیک میکنم مقدار رو توی همون ارایه قبلی میریزه و ارایه جدید به ازای هر بار کلیک درست نمیکنه


<html lang="fa" dir="rtl" xmlns="http://www.w3.org/1999/html" >
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <title></title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <script type="text/javascript" src="js/jquery.js"></script>

</head>
<body>

<br>
<br>

<center>
    <form id="dataform">
        <label for="name">کد ملی</label>
        <input type="text" class="form-control-file" id="n"><br>

        <label for="name">نام</label>
        <input type="text" class="form-control-file" id="name"><br>

        <label for="lastname">نام خانوادگی </label>
        <input type="text" class="form-control-file" id="lastname"><br>

        <label for="fathername">نام پدر</label>
        <input type="text" class="form-control-file" id="fathername"><br>

        <label for="birthday">تاریخ تولد</label>
        <input type="text" class="form-control-file" id="birthday"><br><br>

        <input type='file' style="  margin: 0 124px 5px 0;"/><br><br>
        <img id="myImg" src="#" alt="محل قرار گیری آپلود عکس"   /><br><br>

        <input type="button" id="btnn" onclick="saveInfo()" value="ذخیره">

        <br>
        <br>

        <p id="end"></p>
        <div id="a"></div>
    </form>

</center>

<style>
    #btnn{
        background-color: palevioletred;
        width: 80px;
        height:40px;
    }
</style>

<script>

    var arr=[];
    var arr1=[]

function saveInfo(){

    var nid=document.getElementById("n").value;
    var nameeee=document.getElementById("name").value;
    var namkh=document.getElementById("lastname").value;
    var nampe=document.getElementById("fathername").value;
    var dateborn=document.getElementById("birthday").value;

    arr.push(nid);
    arr.push(nameeee);
    arr.push(namkh);
    arr.push(nampe);
    arr.push(dateborn);

    console.log(arr1);

      arr1.push(arr);

    document.getElementById("end").innerText=arr1;

}

    $(function () {
        $(":file").change(function () {
            if (this.files && this.files[0]) {
                var reader = new FileReader();
                reader.onload = imageIsLoaded;
                reader.readAsDataURL(this.files[0]);
            }
        });
    });

    function imageIsLoaded(e) {
        $('#myImg').attr('src', e.target.result);
    }

</script>

</body>
</html>

ثبت پرسش جدید
مهدی مهدوی
تخصص : تازه وارد
@mehdi.mahdavi97 3 سال پیش مطرح شد
0

@pariageravand
اگر فرض کنیم آیدی myImgFile رو به input عکس داده باشین فایلش اینطوری بدست میاد

var file = document.getElementById('myImgFile').files[0];

مهدی کامران
@kamyzenon 3 سال پیش مطرح شد
0

سلام،شما باید در اینجا از متد map استفاده کنی و یک تابع بنویسی که رو map اجرا بشه و هرسری دیگه به صورت خودکار این عمل انجام میشه و اگه خواستید جایی map رو مطالعه کنید پیشنهاد من https://www.roxo.ir/javascript-array-iteration این مقاله هستش،موفق باشید.


مهدی مهدوی
تخصص : تازه وارد
@mehdi.mahdavi97 3 سال پیش مطرح شد
0

سلام
@pariageravand
مقدار

var arr=[];

رو داخل فانکشن saveInfo قرار بدین

function saveInfo(){
    var arr=[];
    var nid=document.getElementById("n").value;
    var nameeee=document.getElementById("name").value;
    var namkh=document.getElementById("lastname").value;
    var nampe=document.getElementById("fathername").value;
    var dateborn=document.getElementById("birthday").value;

    arr.push(nid);
    arr.push(nameeee);
    arr.push(namkh);
    arr.push(nampe);
    arr.push(dateborn);

    console.log(arr1);

      arr1.push(arr);

    document.getElementById("end").innerText=arr1;

}

مهسا
@mahsa 3 سال پیش مطرح شد
0

@mehdi.mahdavi97 مرررسی واااقعا. من الان شرکت سرکارمم. نجاااتم دادی . حالا اگه بجای مقدار input یه عکس رو imagebase64 uri رو بگیره و بزاره داخل این آرایه چی؟؟؟؟؟؟؟؟؟؟؟؟


مهسا
@mahsa 3 سال پیش مطرح شد
0

@kamyzenon خیلی ممنون


مهدی مهدوی
تخصص : تازه وارد
@mehdi.mahdavi97 3 سال پیش مطرح شد
0

@pariageravand
متوجه نشدم ، منظورتون اینه عکسی که انتخاب میشه مقدار base64 ش رو داخل آرایه قرار بدین ؟


مهسا
@mahsa 3 سال پیش آپدیت شد
0

@mehdi.mahdavi97 االان تو آرایه من مقدار input ها هستش. من میخوام یه عکس هم بگیره بزار تو آرایه. inputi که type:image
نمیدونم چطوری


مهدی مهدوی
تخصص : تازه وارد
@mehdi.mahdavi97 3 سال پیش مطرح شد
0

@pariageravand
اگر فرض کنیم آیدی myImgFile رو به input عکس داده باشین فایلش اینطوری بدست میاد

var file = document.getElementById('myImgFile').files[0];

مهسا
@mahsa 3 سال پیش مطرح شد
0

@mehdi.mahdavi97 ممنون. حالا یه input دارم که type فایل. عکس رو چطوری تبدیل میشه به base64????????


مهدی مهدوی
تخصص : تازه وارد
@mehdi.mahdavi97 3 سال پیش مطرح شد
0

@pariageravand
میتونید از این فانکشن استفاده کنید :

    function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });

وبرای فراخوانی :

    getBase64(file).then(function(data){
       console.log(data);
    });

data مقدار base64 هستش


مهسا
@mahsa 3 سال پیش مطرح شد
0

@mehdi.mahdavi97 ممنون😍😍😍😍😍😍 من تازه شروع کردم و خیلی به مشکل میخورم. وااااقعااااا ممنونم. 🙏🙏🙏🙏🙏


مهسا
@mahsa 3 سال پیش آپدیت شد
0

✅✅✅✅✅✅✅✅✅✅✅✅


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام