Question

如何在提交带文件上传的表单之前验证输入字段（电子邮件，用户名）？它可以在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文件

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();
});

//...

Answer 1

您的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()
        }
    });

});

DEMO：http://jsfiddle.net/n9rjsk76/

Answer 2

对我来说，以上方法均无法解决，所以我提出了以下建议：

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

Answer 3

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

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

使用dropzone验证组合正常形式

3 个答案: