如何使Fine Uploader不忽略文本区域? - javascript

我学会了将Fine Uploader与表单结合使用。但是,我不能让Fine Uploader不要忽略表单中的textarea。 JS库会将输入字段数据传递到PHP端点,但不会对textareas做任何事情。

这是一个现场演示:
http://www.digioppikirja.fi/v3/fineuploader2.html

如果填写表单并查看$ _REQUEST的内容,您将看到除textarea内容以外的所有内容:
http://www.digioppikirja.fi/v3/dump_textarea.txt

该怎么办?

HTML:

<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="http://www.digioppikirja.fi/v3/custom.fineuploader-4.4.0/custom.fineuploader-4.4.0.min.js"></script>
    <link href="fineuploader.css">
    <script type="text/template" id="qq-template">
        <div class="qq-uploader-selector qq-uploader">
            <div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
                <span>Drop files here to upload</span>
            </div>
            <div class="qq-upload-button-selector qq-upload-button">
                <div>Select Files</div>
            </div>
            <span class="qq-drop-processing-selector qq-drop-processing">
                <span>Processing dropped files...</span>
                <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
            </span>
            <ul class="qq-upload-list-selector qq-upload-list">
                <li>
                    <div class="qq-progress-bar-container-selector">
                        <div class="qq-progress-bar-selector qq-progress-bar"></div>
                    </div>
                    <span class="qq-upload-spinner-selector qq-upload-spinner"></span>
                    <span class="qq-upload-file-selector qq-upload-file"></span>
                    <span class="qq-upload-size-selector qq-upload-size"></span>
                    <a class="qq-upload-cancel-selector qq-upload-cancel" href="#">Cancel</a>
                    <span class="qq-upload-status-text-selector qq-upload-status-text"></span>
                </li>
            </ul>
        </div>
    </script>
<head>

<body>
    <form action="endpoint2.php" method="post" enctype="multipart/form-data" id="qq-form">
        <label>Enter your name</label>
        <input type="text" name="user_name" required>
        <label>Enter your email</label>
        <input type="email" name="user_email" required>
        <br /><br />
        <label>The very best thing in travelling</label><br />
        <textarea cols="50" rows="10" name="travelling"></textarea>
        <input type="submit" value="Done">
    </form>

    <div id="my-uploader"></div>

    <script>
        $("#my-uploader").fineUploader();
    </script>
</body>

PHP:

    require_once "handler.php";
require_once "../cfg/digikirjat.cfg.php";

$uploader = new UploadHandler();

// Specify the list of valid extensions, ex. array("jpeg", "xml", "bmp")
$uploader->allowedExtensions = array(); // all files types allowed by default

// Specify max file size in bytes.
$uploader->sizeLimit = 10 * 1024 * 1024; // default is 10 MiB

// Specify the input name set in the javascript.
$uploader->inputName = "qqfile"; // matches Fine Uploader's default inputName value by default

// If you want to use the chunking/resume feature, specify the folder to temporarily save parts.
$uploader->chunksFolder = "chunks";

$method = $_SERVER["REQUEST_METHOD"];
if ($method == "POST") {
    header("Content-Type: text/plain");

    // Call handleUpload() with the name of the folder, relative to PHP's getcwd()
    $result = $uploader->handleUpload($_dirs['temp'].'/upload/');

    // To return a name used for uploaded file you can use the following line.
    $result["uploadName"] = $uploader->getUploadName();


    echo json_encode($result);

    $a = print_r($_REQUEST, true);
    file_put_contents(getcwd().'/dump_textarea.txt', $a);

}
else {
    header("HTTP/1.0 405 Method Not Allowed");
}

参考方案

看起来表单字段解析器当前未处理<textarea>元素。我已经opened up a case并将其作为Fine Uploader 5.0的一部分进行修复。

在此问题解决之前,您可以通过在<textarea>(或任何其他所需的)回调处理程序中解析onUploader并通过setParams将其添加为参数来轻松解决此问题。例如:

callbacks: {
    onUpload: function(id) {
        var textAreaContent = document.getElementsByName("travelling")[0].value;
        this.setParams({travelling: textAreaContent}, id);
    }
}

注意:我尚未测试上面的代码,如果您遇到任何问题,请告诉我,但它应该可以工作。

将Web用户控件添加到页面时,asp按钮onclick不会触发 - javascript

我正在使用使用Visual Studio模板创建的Web表单应用程序。模板具有一个内容占位符,该占位符被访问的任何页面的内容替换。有问题的页面有几个服务器控件,例如文本框,标签和按钮。当我单击我的更新按钮时,它可以正常工作,这些值会回传并更新数据库。我想在所有子页面上创建通用的登录提示。我的导航栏(位于我的母版页中)具有引导程序设置。我在导航栏中添加了一个下…

Telerik单选按钮所需的字段验证器 - javascript

如何设置Telerik单选按钮所需的字段验证器?我想在按钮单击“ BtnSave”上设置必填字段验证器吗?请帮忙!<telerik:RadButton ID="radio_male" runat="server" ToggleType="Radio" AutoPostBack="fa…

用symfony隐藏树枝中的表格行 - javascript

我正在开始编码。我正在使用Symfony 3.3我想用复选框隐藏(并显示)表上的a或某些特定行。我尝试使用javascript和jquery。我希望隐藏的行保持隐藏状态。我不知道该怎么做。这是我的树枝{% block body %} <div class="container"> <h3>List of produ…

表单不提交或按钮提交不起作用 - javascript

据我所知,此代码必须有效,但是我编码时却无效问题在于该表单未提交。我该如何解决?选中时,我什至没有得到复选框的值。<table id="example" class="display" cellspacing="0" width="100%"> <thead&g…

在PHP文件中调用javascript函数并在加载HTML文件之后? - javascript

我需要在我的php中调用js函数,但无法正常工作。有人可以告诉我我在做什么错吗?我该如何轻松地做到这一点?谢谢!我有三个文件:  mail.php负责发送$ _POST的内容(工作正常)。我调用我的javascript函数来切换模式,具体取决于邮件是否已发送。 <? ... $response = $sendgrid->send($email);…