如何向表单添加可选的图像上载功能

Question

I have a Script that I bought and modified. However I am now stuck at one point. In the status update section of the script, the user has the option to select one option(radio) which will allow the user to type in a subject and fill in text then click post button to upload status. There is also an image upload option(radio), which I have actually removed, as I want the image upload to be a main button. Meaning that when the user selects any of the category subject options(radios), and after filling in his subject and text, he can optionally add an image to that post too by clicking the image button. If he does not click the image button then it will post the text and subject -of whichever category/radio he chose- only. Any help or advice in setting this up greatly appreciated. I am a PHP newbie.

Here is the form:

    <div class="message-container" id="message-composer">
<div class="message-form-content">
    <div class="message-form-header">
        <div class="message-form-user"><img src="{$url}/thumb.php?src={$avatar}&t=a" /></div>
        {$lng->form_title}
        <div class="message-form-private"></div>
        <div class="message-loader" id="post-loader9999999999" style="visibility: hidden"><img src="{$url}/{$theme_url}/images/preloader.gif" /></div>
    </div>
    <div class="message-form-inner">
    <form id="imageForm" name="form" action="{$url}/requests/post_message.php" method="POST" enctype="multipart/form-data" >
        <textarea id="post9999999999" class="message-form" placeholder="{$lng->message_form}" name="message"></textarea>
    </div>
    <input type="hidden" name="privacy" id="message-privacy" value="{$private_message}" />
    <div class="selected-files"><span id="queued-files">0</span> {$lng->files_selected}</div>
    <div class="message-form-input"><input type="text" name="value" id="form-value" /></div>
    <div id="values">
        <div class="button-image">
            <input name="my_image[]" id="my_file" size="27" type="file" class="inputImage" title="{$lng->label_image}" multiple="multiple" />
        </div>
        <input type="radio" name="type" value="video" id="video" /><label for="video" title="{$lng->label_video}"><img src="{$url}/{$theme_url}/images/icons/events/video.png" /></label>
        <input type="radio" name="type" value="map" id="map" /><label for="map" title="{$lng->label_map}"><img src="{$url}/{$theme_url}/images/icons/events/map.png" /></label>
        <input type="radio" name="type" value="visited" id="visited" /><label for="visited" title="{$lng->label_visited}"><img src="{$url}/{$theme_url}/images/icons/events/visited.png" /></label>
        <input type="radio" name="type" value="movie" id="movie" /><label for="movie" title="{$lng->label_movie}"><img src="{$url}/{$theme_url}/images/icons/events/movie.png" /></label>
        <input type="radio" name="type" value="music" id="music" /><label for="music" title="{$lng->label_music}"><img src="{$url}/{$theme_url}/images/icons/events/music.png" /></label>
        <input type="radio" name="type" value="game" id="game" /><label for="game" title="{$lng->label_game}"><img src="{$url}/{$theme_url}/images/icons/events/game.png" /></label>
        <input type="radio" name="type" value="food" id="food" /><label for="food" title="{$lng->label_food}"><img src="{$url}/{$theme_url}/images/icons/events/food.png" /></label>
    </div>
    <div type="button" name="action" class="message-btn" value="Post" id="9999999999"><a onclick="startUpload()">{$lng->post}</a></div>
</div>
<iframe id="my_iframe" name="my_iframe" src="" style="display: none"></iframe></form>

Here is the Startupload function:

    function startUpload() {
    if (!$("input[name='type']").is(':checked')) {
        alert('You must select a category before submitting');
    }
    else {
        document.getElementById("imageForm").target = "my_iframe"; //'my_iframe' is the name of the iframe
        document.getElementById("imageForm").submit();
        document.getElementById("post-loader9999999999").style.visibility = "visible";
    }
}
function stopUpload(success){      
    document.getElementById("post-loader9999999999").style.visibility = "hidden";
    document.getElementById("load-content").innerHTML = success + document.getElementById("load-content").innerHTML;
    document.getElementById("imageForm").reset();
    document.getElementById("post9999999999").style.height = "38px";
    document.getElementById("queued-files").innerHTML = "0";
    // Reset the selected 'type' option
    $('#values label').addClass('selected').siblings().removeClass('selected');
    $('.message-form-input').hide('slow');
    jQuery("div.timeago").timeago();
    autosize();
    return true;   
}
function focus_form(id) {
    document.getElementById('comment-form'+id).focus();
    showButton(id);
}
function resizeGallery() {
    // image-container class
    var maxWidth = 1000;
    var maxHeight = 600;
    $('.image-container').css('max-width', maxWidth);
    $('.image-container').css('max-height', maxHeight);
    var currentWidth = $(window).width();
    var currentHeight = $(window).height();
    var currentMidWidth = Math.abs(currentWidth - maxWidth);
    var currentMidHeight = Math.abs(currentHeight - maxHeight);
    // Calculate the Width
    if(currentMidWidth <= 40 && currentMidWidth >= 0) {
        $('.image-container').css('max-width', currentWidth - 40);
        $('.image-container').css('margin-left', 20);
        $('.image-container').css('margin-right', 20);
    } else if(maxWidth < currentWidth) {
        $('.image-container').css('margin-left', ((currentWidth - maxWidth) / 2));
        $('.image-container').css('margin-right', ((currentWidth - maxWidth) / 2));
    } else {
        $('.image-container').css('max-width', currentWidth - 40);
    }
    // Calculate the Height
    if(currentMidHeight <= 40 && currentMidHeight >= 0) {
        $('.image-container').css('max-height', currentHeight - (62 - 20));
        $('.image-container').css('margin-top', 20);
        $('.image-container').css('margin-bottom', 20);
        $('.image-content').css('height', currentHeight - (40 + 62));
        $('#gallery-next, #gallery-prev').css({'height': ($('.image-content').height()-35), 'top': '35px'});
        // console.log('AAA');
    } else if(maxHeight < currentHeight) {
        $('.image-container').css('margin-top', ((currentHeight - maxHeight) / 2));
        $('.image-container').css('margin-bottom', ((currentHeight - maxHeight) / 2));
        $('.image-content').css('height', maxHeight - 62);
        $('#gallery-next, #gallery-prev').css({'height': ($('.image-content').height()-35), 'top': '35px'});
        // console.log('BBB');
    } else {
        $('.image-container').css('max-height', currentHeight - 40);
        $('.image-content').css('height', currentHeight - (40 + 62));
        $('#gallery-next, #gallery-prev').css({'height': ($('.image-content').height()-35), 'top': '35px'});
        // console.log('CCC');
    }
    // console.log('Image Width:'+$('img.ri').width());
    // console.log('Image Height:'+$('img.ri').height());
    // console.log('Container Width:'+$('div.image-content').width());
    // console.log('Container Height:'+$('div.image-content').height());
    return false;
    //$('.image-container');
}