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

Question

我有一个我购买和修改过的脚本。但是我现在陷入了困境。在脚本的状态更新部分，用户可以选择一个选项（收音机），允许用户键入主题并填写文本，然后单击发布按钮上传状态。还有一个图像上传选项（收音机），我实际上删除了，因为我希望图像上传为主按钮。这意味着当用户选择任何类别主题选项（无线电）时，并在填写他的主题和文本后，他也可以选择通过单击图像按钮将图像添加到该帖子。如果他没有点击图像按钮，那么它将发布他选择的任何类别/广播的文本和主题。任何帮助或建议，非常感谢。我是一个PHP新手。

以下是表格：

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

这是Startupload函数：

    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');
}