0

Hello I have the following code which allows a user to select an image.

<div class="modal" id="modal2">
       <div class="TheModal">
        <h2 style="color:white;margin-left:10px;margin-top:02%">Insert Image</h2>
        <div class="InsideModal">
          <input id="thumbage2" name="Image1"class="ModalArea2" type="file" style="display:none">

          <center><label for="thumbage2" id="labelthumb2" style="margin-top:35px;">Choose Image</label></center>

          <center>
            <button class="ModalButton2" onclick="iImage();">Submit</button>
            <button class="ModalButton2" onclick="cancel2();">Cancel</button>
          </center>
        </div>
       </div>      
      </div>

It is NOT in a form, i'm not sure if that matters. 

function iImage(){
var imgsrc = document.getElementById('thumbage2');
if(imgsrc !=null){
    $(document).ready(function (e) {
        $('#form2').on('submit',(function(e) {
            e.preventDefault();
            var formData = new FormData(this);
            console.log("done");
            $.ajax({
                type:'POST',
                url: $(this).attr('action'),
                data:formData,
                cache:false,
                contentType: false,
                processData: false,
                success:function(data){
                    console.log("success");
                    console.log(data);
                },
                error: function(data){
                    console.log("error");
                    console.log(data);
                }
            });
        }));

        $("#ImageBrowse").on("change", function() {
            $("#form2").submit();
        });
    });


    richTextField.document.execCommand('insertParagraph',false,"");
    richTextField.document.execCommand('insertHTML',false,"[Image][Remove=Remove Image]");
    richTextField.document.execCommand('insertParagraph',false,"");
    document.getElementById('modal2').style.display = "none";
    document.getElementById('thumbage2').value =  "";
}

}

Here is my javscript code. Basically what I want is to be able to get the file in the input field and Post it to a php file(saveImage.php) without leaving the page. How do I do this? By the way if you are wondering the purpose is to upload images and store them in Blobs in a MYSQL database. And in case it matters here is my php code:

$imageName = mysql_real_escape_string($_FILES["Image1"]["name"]);
    $imageData = '';
    $imageData2 = '';
    $imageext = '';
    if($imageName != null){
        $imageData = mysql_real_escape_string(file_get_contents($_FILES["Image1"]["tmp_name"]));
        $imageType = mysql_real_escape_string($_FILES["Image1"]["type"]);
        $imageSize = getimagesize($_FILES["Image1"]["tmp_name"]);
        $imageType = mysql_real_escape_string($_FILES["Image1"]["type"]);
        $FileSize = FileSize($_FILES["Image1"]["tmp_name"]);
        $imageext = $imageSize['mime'];
    }

    echo $imageext;

EDIT: OK i changed my JS to what everyone is saying in the comment. But this is not what i want, I want to submit the files data using ajax when a regular button is pressed not an input with type of submit. Can anyone actually help me?

user7133318
  • 73
  • 9

0 Answers0