jQuery 我网站的 Post 表单上的文件上传器问题

Question

我正在尝试使用位于我网站管理面板上 post_form.php 页面上的 jQuery 文件上传器插件来替换我当前的上传器。最后，我希望将上传器链接到 post_form，它动态地允许我网站上的客户创建 posts，并从他们的管理面板帐户上传图像、音乐和视频文件。这些 post 将根据提交 post 的客户提供给各自的个人资料页面。

我遇到的一个问题是，当我为提交按钮插入 jQuery 文件上传器代码的一部分时，预览 table 出现，但所有内容都在提交按钮下方，并且将 post 表格中的其他字段移到右侧。我希望我的 post 表单页面上的插件出现在提交、状态和类别字段上方，如 jQuery 插件站点上的演示所示。之后我要做的下一件事是确保 jQuery UploadHandler.php 文件与我当前的 postcontroller.php 文件合并，以在保持文件上传的同时利用插件的特性和功能我的服务器上的上传/文件夹的路径，并根据创建的 post 的 client/user id，将通过 post_form 制作的 post 提供给我网站的个人资料页面上的用户呃，当他们在填写表格后单击提交按钮时。

如果您能帮助我解决这个问题，我将不胜感激，并非常乐意感谢您的帮助。提前谢谢大家，我希望我是这里的新用户，所以我把一切都说清楚了。

下面是我 post_form

上 jQuery 文件上传器插件的部分代码

code for the 'Post Title', 'Description', and 'URL' text fields placed here

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

code for 'Submit', 'Cancel' and 'Reset' buttons placed here

            <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 lines pointed to links online provided in the plugin placed here

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

Answer 1

通过包含

，我能够让 jQuery 文件上传器显示在我网站的 post_form.php 页面上

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

在文件上传程序代码的开头

<tr>
            <th valign="top">Upload:</th>
      <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">
      <form>
      <label for="theme-switcher">Theme:</label>
      <select id="theme-switcher" class="pull-right">
       <option value="black-tie">Black Tie</option>
       <option value="blitzer">Blitzer</option>
       <option value="cupertino">Cupertino</option>
       <option value="dark-hive" selected>Dark Hive</option>
       <option value="dot-luv">Dot Luv</option>
       <option value="eggplant">Eggplant</option>
       <option value="excite-bike">Excite Bike</option>
       <option value="flick">Flick</option>
       <option value="hot-sneaks">Hot sneaks</option>
       <option value="humanity">Humanity</option>
       <option value="le-frog">Le Frog</option>
       <option value="mint-choc">Mint Choc</option>
       <option value="overcast">Overcast</option>
       <option value="pepper-grinder">Pepper Grinder</option>
       <option value="redmond">Redmond</option>
       <option value="smoothness">Smoothness</option>
       <option value="south-street">South Street</option>
       <option value="start">Start</option>
       <option value="sunny">Sunny</option>
       <option value="swanky-purse">Swanky Purse</option>
       <option value="trontastic">Trontastic</option>
       <option value="ui-darkness">UI Darkness</option>
       <option value="ui-lightness">UI Lightness</option>
       <option value="vader">Vader</option>
      </select>
      </form>
      </div>
               <!-- 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>
<br>
<!-- 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>
<!-- 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>
      </td>
     </tr>
     <tr>

my post_form page with the jQuery fileuploader showing

jQuery 我网站的 Post 表单上的文件上传器问题

jQuery File Uploader Issue On Post Form Of My Site

php

mysql

jquery

jscript

jquery-file-upload