单个文件上传jquery php

Question

I'm sure I've made a simple error on this one. The file isn't being passed to the php page (I get the "Not uploaded:File error. Please try again." error passed back from the PHP page.)

The code works fine without the JQUERY so I guess the PHP is not the problem.

I've checked the field name / id & it seems OK. I tried testing to see if the value of the button was being passed and it wasn't, that's when I came to the conclusion it was probably the JQUERY but then I was stumped.

I know similar posts have been submitted (I've read them) but I'm desperate!!

Thank you in advance.

Here's the HTML:

    <form action="upload.php" name="formname" ENCTYPE="multipart/form-data" id="formid">
        <fieldset>
            <legend>File info</legend>
            <p>
                <label for="file1">Files<span class="red"> *</span></label>
                <input name="file1" type="file" />
            </p>
        </fieldset>
        <p><label>&nbsp;</label><input type="button" id="submit" value="Add" /></p>
    </form>
    <div id="output"></div>

<script>
$(function(){
    $('#submit').on('click', function(){ 
        var fd = new FormData($("#formid"));
        $.ajax({
            url: 'upload.php',  
            type: 'POST',
            data: fd,
            success:function(data){
                $('#output').html(data);
            },
            cache: false,
            contentType: false,
            processData: false
        });
    });
});
</script>

and the PHP

<?php
    $strName = 'JoeBloggs';
    $intId = 1045;
    $missing = '';
    date_default_timezone_set("Europe/London");
    error_reporting(E_ALL);
    include('class.upload.php');
    // where to put the images?
    $dir_dest = '../'.$intId.'/';
    $xcount = 0;
    if (!file_exists($dir_dest)) { mkdir($dir_dest, 0777, true);}
    # upload 1400px
    $handle = new upload($_FILES['file1']);
    if ($handle->uploaded) {
        $y = $handle->image_src_y;
        $height = $y/2;
        $handle->image_resize           = true;
        $handle->image_ratio_crop       = true;
        $handle->image_x                = 700;
        $handle->image_y                = 260;
        $handle->image_convert          = jpg;
        $handle->Process($dir_dest);
        if ($handle->processed) {
            // everything was fine !
            $strFilename1 = $handle->file_dst_name;
            rename( $dir_dest . $strFilename1, $dir_dest . $strName . '.jpg' );
            $missing .= 'File uploaded';
        } else {
            $missing .= $missing. 'Not processed:' . $handle->error . '<br />';
        }
    } else {
        $missing .= 'Not uploaded:' . $handle->error . '<br />';
    }

    echo $missing;
    //header('Location: ../index.php?missing='.$missing);
?>
<img src="<?= $dir_dest . $strName?>.jpg" />

Answer 1

Try this will may help you,

<script>
 $(function(){
  $('#submit').on('click', function(){ 
    var form = $('#formid')[0];
    var formData = new FormData(form);
    $.ajax({
        url: 'upload.php',  
        type: 'POST',
        data: formData,
        success:function(data){
            $('#output').html(data);
        },
        cache: false,
        contentType: false,
        processData: false
    });
});
});
</script>