Php 我的网站发布表单上的jQuery文件上传程序问题

我试图在我的站点的管理面板上的post_form.php页面上使用jQuery文件上传器插件来替换当前的上传器。最终结果，我期待有上传链接到后_形式，它动态地允许我的网站上的客户创建上传的图像，音乐和视频文件从他们的管理面板帐户帖子。这些帖子将根据提交帖子的客户反馈到各自的个人资料页面

我遇到的一个问题是，当我为submit按钮插入jQuery文件上传程序代码时，预览表会显示出来，但所有内容都在submit按钮下面，并将post表单中的其他字段向右偏移。我想让我的帖子表单页面上的插件出现在提交、状态和类别字段的上方，正如jQuery插件网站上的演示所示。接下来我要做的是确保jQuery UploadHandler.php文件与我当前的postcontroller.php文件合并，以利用插件的特性和功能，同时保留服务器上上传/文件夹的文件上传路径，并在填写表单后单击提交按钮时，根据已创建海报的客户/用户id，将通过post_表单制作的帖子提供给我网站个人资料页面上的用户

如果有人能帮助我解决这个问题，我将不胜感激，并非常高兴地感谢你的帮助。提前谢谢大家，我希望我把一切都说清楚，因为我是这里的新用户

下面是我的post_表单上jQuery文件上传器插件的部分代码

此处放置的“文章标题”、“说明”和“URL”文本字段的代码

上传：
添加文件。。。
开始上传
取消上传
删除

此处放置的“提交”、“取消”和“重置”按钮的代码

{% } %}


{%if（file.error）{%}
错误{%=file.Error%}
{% } %}
{%=o.formatFileSize（file.size）%}
删除
{% } %}

脚本行指向此处插件中提供的在线链接

/*jslint:true，regexp:true*/
/*全局窗口，$*/
$（函数（）{
"严格使用",；
//将此更改为服务器端上载处理程序的位置：
var url=window.location.hostname=='wmlmusicguide.com'？
“//jquery文件upload.appspot.com/”：“server/php/”，
uploadButton=$（''）
.addClass（'btn btn primary'）
.prop（'disabled'，true）
.text（'正在处理…'）
.on（'单击'，函数（）{
变量$this=$（this），
data=$this.data（）；
美元这个
.off（'单击'）
.text（“中止”）
.on（'单击'，函数（）{
$this.remove（）；
data.abort（）；
});
data.submit（）始终（函数（）{
$this.remove（）；
});
});
$（'#fileupload'）。fileupload({
url:url，
数据类型：“json”，
自动上载：false，
acceptFileTypes:/（\.\/）（gif | jpe？g | png）$/i，
最大文件大小：999000，
//启用图像大小调整，Android和Opera除外，
//它实际上支持图像大小调整，但无法
//通过XHR请求发送Blob对象：
disableImageResize:/Android（？。*Chrome）| Opera/
.test（window.navigator.userAgent），
预览最大宽度：100，
预览最大高度：100，
previewCrop：true
}).on（'fileuploadadd'，函数（e，数据）{
data.context=$（''）.appendTo（'#文件'）；
$.each（data.files，函数（索引，文件）{
变量节点=$（“
”）
.append（$（''）.text（file.name））；
如果（！索引）{
节点
.append（“
”）
.append（uploadButton.clone（true）.data（data））；
}
appendTo（data.context）；
});
}).on（'fileuploadprocessalways'，函数（e，数据）{
var指数=data.index，
file=data.files[index]，
node=$（data.context.children（）[index]）；
if（file.preview）{
节点
.prepend（“
”）
.prepend（file.preview）；
}
if（file.error）{
节点
.append（“
”）
.append（$（''）.text（file.error））；
}
if（索引+1==data.files.length）{
data.context.find（'按钮'）
                    <tr>
                        <th>Upload:</th>
                        <td width="250">
                        <!-- The file upload form used as target for the file upload widget -->
                        <form id="fileupload" action="//jquery-file-upload.appspot.com/" method="POST" enctype="multipart/form-data">
                        <!-- Redirect browsers with JavaScript disabled to the origin page -->
                        <noscript><input type="hidden" name="redirect" value="https://blueimp.github.io/jQuery-File-Upload/"></noscript>
                        <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
                        <div class="fileupload-buttonbar">
                            <div class="fileupload-buttons">
                                <!-- The fileinput-button span is used to style the file input field as button -->
                                <span class="fileinput-button">
                                <span>Add files...</span>
                                    <input type="file" name="files[]" multiple>
                                </span>
                                <button type="submit" class="start">Start upload</button>
                                <button type="reset" class="cancel">Cancel upload</button>
                                <button type="button" class="delete">Delete</button>
                                <input type="checkbox" class="toggle">
                                <!-- The global file processing state -->
                                <span class="fileupload-process"></span>
                            </div>
                            <!-- The global progress state -->
                            <div class="fileupload-progress fade" style="display:none">
                                <!-- The global progress bar -->
                                <div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
                                <!-- The extended global progress state -->
                                <div class="progress-extended">&nbsp;</div>
                            </div>
                        </div>
                        <!-- The table listing the files available for upload/download -->
                        <table role="presentation"><tbody class="files"></tbody></table>
                        </form> 
                        </td>
                    </tr>
                    <?php if(isset($data['row'])){?>
                    <tr>

            <div class="clear"></div>

            <!-- The blueimp Gallery widget -->
            <div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls" data-filter=":even">
                <div class="slides"></div>
                    <h3 class="title"></h3>
                    <a class="prev">‹</a>
                    <a class="next">›</a>
                    <a class="close">×</a>
                    <a class="play-pause"></a>
                    <ol class="indicator"></ol>
                </div>      
            </div>          

        </div>
        <!--  end content-table-inner ............................................END  -->
        </td>
        <td id="tbl-border-right"></td>
    </tr>
    <tr>
        <th class="sized bottomleft"></th>
        <td id="tbl-border-bottom">&nbsp;</td>
        <th class="sized bottomright"></th>
    </tr>
    </table>
    <div class="clear">&nbsp;</div>

</div>
<!--  end content -->
<div class="clear">&nbsp;</div>
</div>
<!--  end content-outer......END -->
<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-upload fade">
        <td>
            <span class="preview"></span>
        </td>
        <td>
            <p class="name">{%=file.name%}</p>
            <strong class="error"></strong>
        </td>
        <td>
            <p class="size">Processing...</p>
            <div class="progress"></div>
        </td>
        <td>
            {% if (!i && !o.options.autoUpload) { %}
                <button class="start" disabled>Start</button>
            {% } %}
            {% if (!i) { %}
                <button class="cancel">Cancel</button>
            {% } %}
        </td>
    </tr>
{% } %}
</script>
<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-download fade">
        <td>
            <span class="preview">
                {% if (file.thumbnailUrl) { %}
                    <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery><img src="{%=file.thumbnailUrl%}"></a>
                {% } %}
            </span>
        </td>
        <td>
            <p class="name">
                <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
            </p>
            {% if (file.error) { %}
                <div><span class="error">Error</span> {%=file.error%}</div>
            {% } %}
        </td>
        <td>
            <span class="size">{%=o.formatFileSize(file.size)%}</span>
        </td>
        <td>
            <button class="delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>Delete</button>
            <input type="checkbox" name="delete" value="1" class="toggle">
        </td>
    </tr>
{% } %}

<script>
/*jslint unparam: true, regexp: true */
/*global window, $ */
$(function () {
    'use strict';
    // Change this to the location of your server-side upload handler:
    var url = window.location.hostname === 'wmlmusicguide.com' ?
                '//jquery-file-upload.appspot.com/' : 'server/php/',
        uploadButton = $('<button/>')
            .addClass('btn btn-primary')
            .prop('disabled', true)
            .text('Processing...')
            .on('click', function () {
                var $this = $(this),
                    data = $this.data();
                $this
                    .off('click')
                    .text('Abort')
                    .on('click', function () {
                        $this.remove();
                        data.abort();
                    });
                data.submit().always(function () {
                    $this.remove();
                });
            });
    $('#fileupload').fileupload({
        url: url,
        dataType: 'json',
        autoUpload: false,
        acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
        maxFileSize: 999000,
        // Enable image resizing, except for Android and Opera,
        // which actually support image resizing, but fail to
        // send Blob objects via XHR requests:
        disableImageResize: /Android(?!.*Chrome)|Opera/
            .test(window.navigator.userAgent),
        previewMaxWidth: 100,
        previewMaxHeight: 100,
        previewCrop: true
    }).on('fileuploadadd', function (e, data) {
        data.context = $('<div/>').appendTo('#files');
        $.each(data.files, function (index, file) {
            var node = $('<p/>')
                    .append($('<span/>').text(file.name));
            if (!index) {
                node
                    .append('<br>')
                    .append(uploadButton.clone(true).data(data));
            }
            node.appendTo(data.context);
        });
    }).on('fileuploadprocessalways', function (e, data) {
        var index = data.index,
            file = data.files[index],
            node = $(data.context.children()[index]);
        if (file.preview) {
            node
                .prepend('<br>')
                .prepend(file.preview);
        }
        if (file.error) {
            node
                .append('<br>')
                .append($('<span class="text-danger"/>').text(file.error));
        }
        if (index + 1 === data.files.length) {
            data.context.find('button')
                .text('Upload')
                .prop('disabled', !!data.files.error);
        }
    }).on('fileuploadprogressall', function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('#progress .progress-bar').css(
            'width',
            progress + '%'
        );
    }).on('fileuploaddone', function (e, data) {
        $.each(data.result.files, function (index, file) {
            if (file.url) {
                var link = $('<a>')
                    .attr('target', '_blank')
                    .prop('href', file.url);
                $(data.context.children()[index])
                    .wrap(link);
            } else if (file.error) {
                var error = $('<span class="text-danger"/>').text(file.error);
                $(data.context.children()[index])
                    .append('<br>')
                    .append(error);
            }
        });
    }).on('fileuploadfail', function (e, data) {
        $.each(data.files, function (index) {
            var error = $('<span class="text-danger"/>').text('File upload failed.');
            $(data.context.children()[index])
                .append('<br>')
                .append(error);
        });
    }).prop('disabled', !$.support.fileInput)
        .parent().addClass($.support.fileInput ? undefined : 'disabled');
});
// Initialize the jQuery UI theme switcher:
$('#theme-switcher').change(function () {
    var theme = $('#theme');
    theme.prop(
        'href',
        theme.prop('href').replace(
            /[\w\-]+\/jquery-ui.css/,
            $(this).val() + '/jquery-ui.css'
        )
    );
});
// Post Form Validate
    $(document).ready(function () {
        $('#postForm').validate({
            errorElement: "div",
            rules: {
                name: { required: true },
                details: { required: true },
                category: { required: true }
            }
        });
        $('#restform').click(function(){
            $('#postForm')[0].reset();
        });
    });
</script>

                    <td colspan=2 width="100%">                 
                    <!-- The table listing the files available for upload/download -->
                    <table role="presentation"><tbody class="files"><textarea cols="60" rows="6"></textarea></tbody></table>

                    <div class="rfloat">