How to upload the file without submitting the form?

Question

I am trying to upload a file with ajax and php without page refresh and for submit. my code is able to run and alert the valid message if I just do the preg_match, but when I add the rest of the validation which need to use the $_FILES[$filrec]["tmp_name"], it won't alert me the valid message.

What is wrong here? isn't it possible to upload the file without submitting the form with the following method?

There are bunch of different suggestions and examples with more complicated javascript or jquery methods, but I am trying to simply the ajax and leave the rest for PHP. is that possible with my bellow ajax function ?

Javascript :

    var fileselected = $("#browse").val().replace(/C:\\fakepath\\/i, '');
    setTimeout(function() {

                    $.ajax({
                    type: 'POST',
                    url: "ajax/extval.php",
                    data: {fileprs: fileselected},
                    dataType: 'json',
                    cache: false,
                      success: function(resuval) {
                          // file validation result
                          if (resuval === "valid"){
                                   alert ("valid")

PHP :

    <form id="upload" method="post" class="<?php echo $orvalue."<separator>".$user_id ?>" action="" enctype="multipart/form-data">
        <div id="formcontent">
       <label class="required" for="unitprice" title="Unit price"><input type="text" id="unitprice" name="unitprice" />Unit price</label>
        <label class="required" for="qty" title="How many pcs"><input type="text" id="qty" name="qty" />Quanity</label>
        <label class="required" for="express" title="Express within China"><input type="text" id="express" name="express" />Express</label>
        <label class="required" for="linkURL" title="Insert a full URL http:\\"><input type="text" id="linkURL" name="linkURL" />Link</label>
       <label  for="yourdesc" title="Describe your need clearly"><textarea id="yourdesc" name="yourdesc"></textarea>Description<li><font size="-2">You can type 400 letters only, you typed :</li><li id="lettercounter"></li>letters</font></label>
        <label for="formsubmit" class="nocontent"><input type="button" id="submitButton" href="#" class="progress-button" value="Add to order" /><strong>Note:</strong> Items marked <img src="../../images/required.jpg" alt="Required marker" width="20" height="20" /> are required fields</label>

      </div>
    </form>

PHP :

 $filrec =mysql_real_escape_string($_POST['fileprs']);

   if(preg_match("/\.(gif|png|jpg|JPG|jpeg|bmp|BMP)$/", $filrec))
    {

    $fileType = exif_imagetype($_FILES[$filrec]["tmp_name"]);
        $allowed = array(IMAGETYPE_GIF, IMAGETYPE_JPEG, IMAGETYPE_PNG);
    $allin = "valid";
        echo json_encode($allin);
 }

Appreciated

exactly why are you doing a mysql escape on `fileprs`? You only do that when you're literally just about to use the escape string in an sql query. Using it for any other purpose is not a good idea. — Marc B, Jan 30 '14 at 14:36
`fileselected` also doesn't appear to exist anywhere EXCEPT where you're stuffing it into the ajax call... — Marc B, Jan 30 '14 at 14:43
@MarcB sorry I have missed it, check it again please I have edited the post — Kissa Mia, Jan 30 '14 at 14:45
I think this $_FILES[$filrec]["tmp_name"] is not correct, am I right? — Kissa Mia, Jan 30 '14 at 14:49
do a `var_dump($_POST)` to see what you're REALLY getting from the client. you'll probably find that `fileprs` is empty or something. — Marc B, Jan 30 '14 at 15:14
I have decided to use the form submit, the ajax is a big headache — Kissa Mia, Jan 30 '14 at 15:25

score 0 · Accepted Answer · answered Jan 30 '14 at 14:50

0

You can use the following PHP code to get the file received from Ajax:

$data = split(",",file_get_contents('php://input'));

$img_data = base64_decode($data[1]);

file_put_contents( 'uploads/' . $_SERVER['HTTP_X_FILENAME'], $img_data );

answered Jan 30 '14 at 14:50

clami219

2,958
1
31
45

score 0 · Answer 2 · answered Sep 30 '19 at 07:48

You can use Following Ajax POST Request this will help you

<script>
$(document.body).on('click','.postDefects',function(){
      var form_data = new FormData();
      var defect = $(this).closest('tr').find( "input[name='defect_id']" ).val();
      var txt_defect=$("#text_defect").val();
      var upload_defect = document.getElementById("upload_defect").files[0];
       form_data.append("upload_defect",upload_defect);
       form_data.append("defect_id",defect_id);
       form_data.append("txt_defect",txt_defect);
      console.log(form_data);
      $.ajax({
          url:"postsample_defects.php",
          method:"POST",
          data: form_data,
          contentType: false,
          cache: false,
          processData: false,
          beforeSend:function(){
          $('#uploaded_image').html("<label class='text-success'>Image Uploading..</label>");
          },
          success:function(data)
          {
           $('#uploaded_image').html(data);             
          }
         });
    });
 </script>

How to upload the file without submitting the form?

2 Answers2