Question

我正在开发一个jquery blueimp文件上载插件，我需要一个简单的功能，我想在上载按钮上方添加一个附加文本框，在其中可以放置对应的文件夹名称。后者在服务器端，所有文件都将存储在该文件夹中。

现在我可以上传多个文件，但是我无法在文本框（文件夹名称）上检查验证。我尝试了多种方法，但是失败了，并开始了文件处理。

我正在使用的文件上传插件是：plugin link

到目前为止我一直在尝试

在我的index.html文件中，我在下面的表单部分中添加了一个文本框。

<form id="fileupload" action="https://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="row fileupload-buttonbar">
        <div class="col-lg-7">
            <input type = "text" name = "txtFoldername" id = "txtFoldername" placeholder="Enter Folder"><br/><br/>
            <!-- The fileinput-button span is used to style the file input field as button -->
            <span class="btn btn-success fileinput-button">
                <i class="glyphicon glyphicon-plus"></i>
                <span>Add files...</span>
                <input type="file" name="files[]" multiple>
            </span>
            <button type="submit" id = "startButton" class="btn btn-primary start">
                <i class="glyphicon glyphicon-upload"></i>
                <span>Start upload</span>
            </button>
            <button type="reset" class="btn btn-warning cancel">
                <i class="glyphicon glyphicon-ban-circle"></i>
                <span>Cancel upload</span>
            </button>
            <button type="button" class="btn btn-danger delete">
                <i class="glyphicon glyphicon-trash"></i>
                <span>Delete</span>
            </button>
            <input type="checkbox" class="toggle">
            <!-- The global file processing state -->
            <span class="fileupload-process"></span>
        </div>
        <!-- The global progress state -->
        <div class="col-lg-5 fileupload-progress fade">
            <!-- The global progress bar -->
            <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                <div class="progress-bar progress-bar-success" style="width:0%;"></div>
            </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" class="table table-striped"><tbody class="files"></tbody></table>
</form>

并且我尝试在jquery中使用非常简单的代码（如果用户输入了文件夹名称），则它将进行进一步处理，否则返回false，但是。验证有效，但在验证之后，将进行进一步处理。

我需要做的就是单击“开始上传”按钮时，它必须检查文件夹名称是否已放入（如果没有），则不应继续进行下一步的上传过程。我也在这里添加我的jquery验证代码。

第一种方式

这是我在jquery插件和所有其他jquery文件之后的index.html文件中尝试的第一种方法，在此代码下方。它可以工作，但需要进一步处理。

<script>
    $(document).on('click','#startButton',function(){

        alert('cant upload file');
        return false;
    });
</script>

第二种方式 这个插件的主文件名为main.js，我们可以在其中做一些与之相关的事情。这段代码在js文件夹内的main.js中。

$('#fileupload').bind('fileuploadstart', function (e, data) {
                // Load & display existing files:
                if($('#folder_name').val() != ''){
                    alert('go for further process');
                } else{
                    alert('Must enter folder name');
                    return false;
                    //but after return false it's go for further process
                }


            });

在这里验证也可以，但是需要进一步的过程来上传文件。简而言之return false无法正常工作。

如何验证jQuery blueimp文件上传插件中的文本框

0 个答案: