消息框中的图像需要更好的解决方案来获取I​​D和Src

Question

i have a message box where users can write a comment/message to the user.

i would like to have the option to add images to the messages and so far i have managed a slapdash code that does what i require but is slightly buggy and i really need pointing in the right direction for a simpler cleaner method of doing what i am doing here..

From the code i provide can anybody suggest a simpler cleaner way to provide this option within my message box..

I would like to be able to not do an onclick and use jscript or jquery to grab the id's and src ect.

but im not sure as to how to go about this

im hoping its possible with a simple jquery jscript grab of some sort.

If any1 can help me with this please advise.

Any help is greatly appreciated.. iv trawled the net looking for help / videos ect but i cannot find exactly what i am looking for although loops and arrays keep popping up...

Thanks in advance.

$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

You Can Return To This Website 
 Whenever You Are Ready To

 <Press Back Button On Mobiles>

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