изображения в окне сообщения Нужно лучшее решение, чтобы получить ID и Src

Question

У меня есть окно сообщения, где пользователи могут написать комментарий / сообщение пользователю.

Я хотел бы иметь возможность добавлять изображения к сообщениям, и до сих пор я управлял кодом slapdash, который делает то, что мне нужно, но немного глючит, и мне действительно нужно указывать в правильном направлении для более простого уборщикаметод выполнения того, что я делаю здесь ..

Из кода, который я предоставляю, кто-нибудь может предложить более простой способ предоставить эту опцию в моем окне сообщения ..

Я хотел бы иметь возможностьне делать onclick и использовать jscript или jquery для захвата идентификаторов и т. д.

, но я не уверен, как это сделать

я надеюсь, что это возможно с помощью простого jquery jqueryзахватите что-нибудь.

Если кто-нибудь1 может помочь мне с этим, пожалуйста, сообщите.

Любая помощь очень ценится.Я ищу, хотя циклы и массивы продолжают появляться ...

Заранее спасибо.

$image1=$row['mig1'];
$image2=$row['mig2'];
$image3=$row['mig3'];
$image4=$row['mig4'];

if ($sellermessage) { 

    if ($sendto===$selecteduser) {
    echo" <div id='Seller{$messageid}' data-variable-MESSAGEDATE='{$messagedate}' data-variable-MESSAGEACCOUNTNAME='{$messageaccountname}'  data-variable-messageID='{$messageid}' class='messageboxS'>


        <div class='Mimage1' id='Mimage1{$messageid}'>  

            <input type='file' class='INimage' id='file1{$messageid}' data-variable-viewid1='{$image1}' 
            onClick='showFiles(this , {$messageid} , \"viewid1\" , \"file1\" , \"image1\"  );' accept='image/*' > 

            <label for='file1' id='file1L' class='LMimage'>
                <img id='image1{$messageid}' class='vimage' src='{$image1}'></img>
            </label>

        </div>



            <div class='Mimage2' id='Mimage2{$messageid}'>  

                <input type='file' class='INimage' id='file2{$messageid}' data-variable-viewid2='{$image2}' 
                onClick='showFiles(this , {$messageid} , \"viewid2\" , \"file2\" , \"image2\"  );' accept='image/*' > 

                <label for='file2' id='file2L' class='LMimage'>
                    <img id='image2{$messageid}' class='vimage' src='{$image2}'></img>
                </label>

            </div>



                <div class='Mimage3' id='Mimage3{$messageid}'>  

                    <input type='file' class='INimage' id='file3{$messageid}' data-variable-viewid3='{$image3}' 
                    onClick='showFiles(this , {$messageid} , \"viewid3\" , \"file3\" , \"image3\"  );' accept='image/*' > 

                    <label for='file3' id='file3L' class='LMimage'>
                        <img id='image3{$messageid}' class='vimage' src='{$image3}'></img>
                    </label>

                </div>



                    <div class='Mimage4' id='Mimage4{$messageid}'>  

                        <input type='file' class='INimage' id='file4{$messageid}' data-variable-viewid4='{$image4}' 
                        onClick='showFiles(this , {$messageid} , \"viewid4\" , \"file4\" , \"image4\"  );' accept='image/*' > 

                        <label for='file4' id='file4L' class='LMimage'>
                            <img id='image4{$messageid}' class='vimage' src='{$image4}'></img>
                        </label>

                    </div>


   <div class='messageboxSavatar'> <img src='{$avatarimageS}' class='messageavatarimageS'></img></div>  <div class='messagenameseller'>{$messageaccountname}</div>  <div id='editSeller{$messageid}' contenteditable='false' class='messagetextS' >{$sellermessage}</div> <div id='CSeller{$messageid}' class='csleft'></div>"; if ($useraccountname===$messageaccountname){ echo " <div class='deletemessageright' ondblClick='deletemessageSeller({$messageid})';></div>"; } echo" <div class='boxSinfo'>Sent: <span style='font-size:10px;color:#00bf5e;'>{$messageDate}</span><span style='font-size:10px;color:#ef00ff;'> {$messageTime}</span></div> "; if ($useraccountname===$messageaccountname)

        { echo " <div id='boxSEDIT{$messageid}' class='boxSEDIT' title='Click To Edit Your Message' onclick='editSellermessage({$messageid});'>Edit</div>"; 
        } echo" </div> ";
    }

}



<script>
function imagealert(){

    if (confirm("A larger Window will be opened To View The Selected Image In Greater Detail\n\nYou Can Return To This Website \n Whenever You Are Ready To\n\n <Press Back Button On Mobiles>\n\nThank You")) {
        return true; } 

            else {
                  event.preventDefault();
                  return false;
                 }
};

//WOULD PREFERE TO GRAB THE VARS VIA JQUERY JSCRIPT HERE INSTEAD OF PASSING THEM 
function showFiles(input , mid , imageid , myid , imgsrc) {

    //  SO HERE WOULD BE $('the images').get id's and src

    var fileid=myid;
    var messageid=mid;
    var viewid=imageid;
    var imagesrc=imgsrc;
    var filemessageid = fileid+messageid;
    var viewid2 = document.getElementById(filemessageid).getAttribute("data-variable-"+viewid);             
    var ebm=document.getElementById('editSeller'+messageid+'');

//as you can see i have gone a litttle to far here and this could be simplyfied -- any help appreciated..

        if ( $(ebm).attr("contentEditable") == "false" ) {          
            input.disabled = true;
                MyWindow=window.open(viewid2,'MyWindow','width=565,height=400'); 
        }
        else    
            if ( $(ebm).attr("contentEditable") == "true" ) {   
                input.disabled = false;
                    var mydiv = document.getElementById(filemessageid);
                        mydiv.addEventListener("change", myScript);

                    function myScript(){   //IMPORTANT SANITISE AND CHECK
                            var img1 = document.getElementById(imagesrc+messageid); //the image 
                            var ext = input.files[0]['name'].substring(input.files[0]['name'].lastIndexOf('.') + 1).toLowerCase();

                            if (input.files && input.files[0] && (ext == "gif" || ext == "png" || ext == "jpeg" || ext == "jpg")) 
                                    {
                                    var reader = new FileReader();      
                                            reader.onload = function (e) {
                                            $(img1).attr('src', e.target.result);
                                            }

                                    reader.readAsDataURL(input.files[0]);
                                    }
                                        else {      
                                            alert('Gif Jpeg Jpg Png Only Please');
                                            return false;
                                        }


                    };

            }

}

</script>