使用 dropzone 验证组合的范式答案

【问题标题】：Validate combined normal form with dropzone使用 dropzone 验证组合的范式
【发布时间】：2014-09-15 10:47:18
【问题描述】：

如何在通过文件上传提交表单之前验证输入字段（电子邮件、用户名）？是否可以在 dropzone 中集成 jquery 验证插件？

<form id="my-awesome-dropzone" class="dropzone">
 <div class="dropzone-previews"></div>

  <!-- Now setup your input fields -->
  <input type="email" id="email" name="email" />
  <input type="text" id="username" name="usename" />

  <button type="submit">Submit data and files!</button>
</form>

javascript 拖放区文件

Dropzone.options.myAwesomeDropzone = { 

// The configuration we've talked about above
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 100,
maxFiles: 100,

// The setting up of the dropzone
init: function() {
var myDropzone = this;

// First change the button to actually tell Dropzone to process the queue.
this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {
    //I wont to put validation plugin here:

   $('#my-awesome-dropzone').validate({
     rules: {
        email: {
            required: true
        },
        usename: {
            required: true
        }
     }
  });

  e.preventDefault();
  e.stopPropagation();
  myDropzone.processQueue();
});

//...

【问题讨论】：

展示你使用 jQuery Validate 插件的尝试。

标签： javascript forms jquery-validate dropzone.js

【解决方案1】：

Dropzone.options.myAwesomeDropzone = { 

autoProcessQueue: false,

uploadMultiple: true,

parallelUploads: 100,

maxFiles: 100,

init: function() {

var myDropzone = this;


this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {

if($('#my-awesome-dropzone').valid()){

  e.preventDefault();

  e.stopPropagation();

  myDropzone.processQueue();

}
});

【讨论】：

【解决方案2】：

您的 HTML：

<form id="my-awesome-dropzone" class="dropzone">
    <div class="dropzone-previews"></div>

    <!-- Now setup your input fields -->
    <input type="email" id="email" name="email" />
    <input type="text" id="username" name="usename" />

    <button type="submit">Submit data and files!</button>
</form>

使用 .validate() 方法简单地初始化 jQuery Validate 插件：

$(document).ready(function () {

    $('#my-awesome-dropzone').validate({
        rules: {
            email: {
                required: true
            },
            usename: {
                required: true
            }
        },
        submitHandler: function(form) {
            // optional callback function
            // only fires on a valid form submission
            // do something only if/when form is valid
            // like process the dropzone queue HERE instead
            // then use .ajax() OR .submit()
            form.submit()
        }
    });

});

演示：http://jsfiddle.net/n9rjsk76/

【讨论】：

正如您在我的代码中看到的，验证必须在 dropzone 内。文件上传时提交按钮处于活动状态。我不会将 jquery 验证插件与 DROPZONE.js 集成
@GoranRadovanovic，不，我在您的代码中看不到任何显示 jQuery Validate 的内容。除非页面加载时表单不存在，否则没有理由将validate() 放在放置区代码中。
我编辑了我的代码。现在你可以看到我需要验证的地方。当我点击提交按钮时，同时上传文件并提交带有数据（电子邮件、用户名）的表单。
@GoranRadovanovic，正如怀疑的那样，您没有费心尝试我的解决方案。仅供参考，.validate() 方法只是插件在表单上初始化的方式。 您不应该调用.validate() 来触发验证测试，因为触发事件是由插件自动捕获的。换句话说，只要调用.validate()时表单的HTML存在，就会自动进行验证。由于您的代码中没有任何内容表明表单的 HTML 是动态创建的，因此我的回答是有效的。
嗨@Sparky，我有同样的情况，我很想解决它。我尝试实施您的解决方案，但我的浏览器挂起，光标变为手形，Chrome 然后冻结该窗口。某处是否应该有required 注释？你 100% 确定这个 sn-p 是完整的吗？

【解决方案3】：

对我来说，以上都没有解决，所以我提出了以下内容：

<div id='form-sucesso' style="border-radius: 15px;">
            <form method="post" action="upload.php" enctype="multipart/form-data" data-form-output="form-output-global" data-form-type="forms">
            <br/>
                    <input type='hidden' name='quem' id='quem' value='i' />
                    <input type='hidden' name='id_cliente_poder' id='id_cliente_poder' value='5' />

                    <div class="cell-sm-10">
                      <div class="form-wrap form-wrap-validation">
                        <label class="form-label" for="ambiance">Ambiance Name</label>
                        <input class="form-input" type="text" id ="ambiance" name="ambiance"  onkeypress="document.getElementById('resp1').innerHTML=''" required  /> <span id="resp1"></span>
                      </div>
                    </div><br/>
                    <div class="dropzone" id="myDropzone">
                    <div class="fallback">
                    <input class="form-input-file" id="form-input-file" type="file" name="arquivo" multiple required />
                    </div>
                    </div>
                    <div class="form-button">
                    <font size='1'>
                        &#8674; Tous les champs sont obligatoires.
                        <br/>
                        &#8674; Le fichier doit avoir un maximum de 10 Mbs
                        <br/>
                        &#8674; Les formats de fichier suivants sont pris en charge: png, jpg, gif et pdf
                    </font><br/>
                <button class="button button-primary" type="submit" id="submit-all"><span>Envoyer</span></button>
              </div>
            </form>
            </div>

Dropzone.options.myDropzone={
url: "upload.php",
paramName: "arquivo", // same name that you use at upload.php
autoProcessQueue: false,
uploadMultiple: false,
parallelUploads: 5,
maxFiles: 5,
maxFilesize: 10,
acceptedFiles: 'image/*',
addRemoveLinks: true,
init: function()
{
    dzClosure = this; // Makes sure that 'this' is understood inside the functions below.

    // for Dropzone to process the queue (instead of default form behavior):
    document.getElementById("submit-all").addEventListener("click", function(e)
    {
        // Make sure that the form isn't actually being sent.
        e.preventDefault();
        e.stopPropagation();
        if (document.getElementById("ambiance").value=='') document.getElementById('resp1').innerHTML="<font color=red size=1 face='Verdana'> &#8673; Champ obligatoire!</font>";
        else dzClosure.processQueue();
    });

    //send all the form data along with the files:
    this.on("sending", function(file, xhr, formData)
    {
        formData.append("quem", $("#quem").val());
        formData.append("id_cliente_poder", $("#id_cliente_poder").val());
    });

    this.on('success', function( file, resp ){
        document.getElementById('form-sucesso').innerHTML="<div style='width:100%;height:100%;border-radius: 15px;background-color:rgba(0, 0, 0, 0.01);color:#000000;font-size:18px;text-align:center;'>&#x263a; Archive téléchargé avec succès!</div>";
    });
}}

//PHP

$normalizeChars = array(
'Š'=>'S', 'š'=>'s', 'Ð'=>'Dj','Ž'=>'Z', 'ž'=>'z', 'À'=>'A', 'Á'=>'A', 'Â'=>'A', 'Ã'=>'A', 'Ä'=>'A',
'Å'=>'A', 'Æ'=>'A', 'Ç'=>'C', 'È'=>'E', 'É'=>'E', 'Ê'=>'E', 'Ë'=>'E', 'Ì'=>'I', 'Í'=>'I', 'Î'=>'I',
'Ï'=>'I', 'Ñ'=>'N', 'Ń'=>'N', 'Ò'=>'O', 'Ó'=>'O', 'Ô'=>'O', 'Õ'=>'O', 'Ö'=>'O', 'Ø'=>'O', 'Ù'=>'U', 'Ú'=>'U',
'Û'=>'U', 'Ü'=>'U', 'Ý'=>'Y', 'Þ'=>'B', 'ß'=>'Ss','à'=>'a', 'á'=>'a', 'â'=>'a', 'ã'=>'a', 'ä'=>'a',
'å'=>'a', 'æ'=>'a', 'ç'=>'c', 'è'=>'e', 'é'=>'e', 'ê'=>'e', 'ë'=>'e', 'ì'=>'i', 'í'=>'i', 'î'=>'i',
'ï'=>'i', 'ð'=>'o', 'ñ'=>'n', 'ń'=>'n', 'ò'=>'o', 'ó'=>'o', 'ô'=>'o', 'õ'=>'o', 'ö'=>'o', 'ø'=>'o', 'ù'=>'u',
'ú'=>'u', 'û'=>'u', 'ü'=>'u', 'ý'=>'y', 'ý'=>'y', 'þ'=>'b', 'ÿ'=>'y', 'ƒ'=>'f',
'ă'=>'a', 'î'=>'i', 'â'=>'a', 'ș'=>'s', 'ț'=>'t', 'Ă'=>'A', 'Î'=>'I', 'Â'=>'A', 'Ș'=>'S', 'Ț'=>'T',
'’'=>'', ' '=>'-', "'"=>"", '"'=>'', 'ª'=>'a', 'º'=>'o', '°'=>'o', '/'=>'', '«'=>'', '»'=>'', ','=>'',
'ê'=>'e', 'à'=>'a', 'é'=>'e', 'ô'=>'o', 'è'=>'e', 'à'=>'a', 'Ê'=>'E', 'À'=>'A', 'É'=>'E', 'O'=>'O', 'E'=>'E', 'A'=>'A',
'ã'=>'a',);

$arquivo='';

if (isset($_FILES['arquivo']['tmp_name'])) $arquivo = $_FILES['arquivo']['tmp_name'];
if (!empty($arquivo)){
$err=0;
$arquivo_name = strtr($_FILES['arquivo']['name'], $normalizeChars);
$arquivo_size = $_FILES['arquivo']['size'];
$arquivo_type = $_FILES['arquivo']['type'];

if ($arquivo_size > 10240000){
    $alert= "<font color=red>Votre archive ne peut pas dépasser 10 MBs</font>";
    $err++;
}

if ($err==0){
    $id_cliente='';
    if ($_SESSION['poder']==1){
        $id_cliente=$_POST['id_cliente_poder'];
        $quem_vai='3dplan';
    }
    else{
        $id_cliente=$_POST['id_cliente_poder'];
        if ($_POST['quem']=='c') $quem_vai='cotation';
        else $quem_vai='envoye';
    }

    $caminho="yourfoldergoeshere/$id_cliente/$quem_vai";
    if (!file_exists($caminho)){
        if (!mkdir($caminho, 0755, true)){
            $error = error_get_last();
            echo $error['message'];
        }}

    $caminho=$caminho.'/'.$arquivo_name;

    /* Defina aqui o tipo de arquivo suportado */
    $ext = pathinfo($arquivo_name, PATHINFO_EXTENSION);
    $allowed =  array('xlsx', 'xls', 'doc', 'docx', 'pdf', 'png', 'jpg', 'gif', 'jpeg', 'ai', 'cdr', 'zip', 'rar', 'gzip', 'XLSX', 'XLS', 'DOC', 'DOCX', 'PDF', 'PNG', 'JPG', 'GIF', 'JPEG', 'AI', 'CDR', 'ZIP', 'RAR', 'GZIP');
    if (in_array($ext,$allowed)){
        move_uploaded_file($arquivo,$caminho);
        $alert = "&#x263a; Archive téléchargé avec succès! <br/>";
    }
    else $alert= "<font color=red>Extension de archive invalide</font><br/>";}} else $alert= "S'il vous plaît poster un archive";
echo "<br/><br/>".$alert."<br/><br/><br/><br/>";

【讨论】：

【解决方案4】：

在 laravel 中，您可以在单击提交按钮时验证请求。如果没有文件选择，他们可以回调。

    $validated = $request->validate([
        'file' => 'required',
    ]);

【讨论】：