web-dev-qa-db-ja.com

アップロード時のドロップゾーン送信ボタン

ドロップゾーンファイルアップローダーにボタンアップロードを追加したい。現在、ファイルを選択するか、ドロップゾーン領域にドラッグした直後にファイルをアップロードしています。私がしたいことは次のとおりです。1.アップロードするファイルを選択またはドラップします。 2.検証3.アップロードボタンを押すか押して、ファイルをアップロードします。

N.B：ボタンのアップロードを押した後にのみファイルがアップロードされます。

こちらが私のフォームです

<form id='frmTarget' name='dropzone' action='upload_files.php' class='dropzone'>
   <div class='fallback'>
      <input name='file' type='file' multiple />
   </div>
   <input id='refCampaignID' name='refCampaignID' type='hidden' value=\ "$rowCampaign->CampaignID\" />
</form>

これが私のJSです

Dropzone.options.frmTarget = 
    {
            url: 'upload_files.php',
            paramName: 'file',
            clickable: true,
            maxFilesize: 5,
            uploadMultiple: true, 
            maxFiles: 2,
            addRemoveLinks: true,
            acceptedFiles: '.png,.jpg,.pdf',
            dictDefaultMessage: 'Upload your files here',
            success: function(file, response)
            {
                setTimeout(function() {
                    $('#insert_pic_div').hide();
                    $('#startEditingDiv').show();
                }, 2000);
            }
        };

ここに私のPHP投稿リクエストがあります

 foreach ($_FILES["file"] as $key => $arrDetail) 
   {
      foreach ($arrDetail as $index => $detail) {
         //print_rr($_FILES["file"][$key][$index]);
         $targetDir = "project_images/";
         $fileName = $_FILES["file"]['name'][$index];
         $targetFile = $targetDir.$fileName;

         if(move_uploaded_file($_FILES["file"]['tmp_name'][$index],$targetFile))
         {
            $db = new ZoriDatabase("tblTarget", $_REQUEST["TargetID"], null, 0);
            $db->Fields["refCampaignID"] = $_REQUEST["refCampaignID"];
            $db->Fields["strPicture"] = $fileName;
            $db->Fields["blnActive"] = 1;
            $db->Fields["strLastUser"] = $_SESSION[USER]->USERNAME;
            $result = $db->Save();

            if($result->Error == 1){
               return "Details not saved.";
            }else{
               return "Details saved.";
            }
         }else{
            return "File not uploaded.";
         }
      }
   }
javascriptjquerydropzone.jsdropzone
12
Gael Musikingala

必要がある：

  1. ボタンを追加します。

    <button type="submit" id="button" class="btn btn-primary">Submit</button>

  2. Dropzonenotに、デフォルトで行うように、ファイルをドロップするときに自動的にアップロードするように指示します。 autoProcessQueue configオプション で完了しました：

    autoProcessQueue: false

  3. Dropzoneはファイルを自動アップロードしないため、ボタンをクリックしたときに手動でアップロードする必要があります。そのため、Dropzoneにアップロードを行うように指示する、そのボタンクリックのイベントハンドラーが必要です。

    $("#button").click(function (e) {
    e.preventDefault();
    myDropzone.processQueue();
});

  4. それはPOSTアップロードされたファイルで、他の入力フィールドはありません。おそらく、refCampaignID、CSRFトークンがあれば、すべてのフィールドを投稿したいでしょう。などを行うには、送信する前にPOST=にコピーする必要があります。Dropzoneには、各ファイルの直前に呼び出される sending event があります。コールバックを追加できる場所が送信されます：

    this.on('sending', function(file, xhr, formData) {
    // Append all form inputs to the formData Dropzone will POST
    var data = $('form').serializeArray();
    $.each(data, function(key, el) {
        formData.append(el.name, el.value);
    });
});

すべてを一緒に入れて：

Dropzone.options.frmTarget = {
    autoProcessQueue: false,
    url: 'upload_files.php',
    init: function () {

        var myDropzone = this;

        // Update selector to match your button
        $("#button").click(function (e) {
            e.preventDefault();
            myDropzone.processQueue();
        });

        this.on('sending', function(file, xhr, formData) {
            // Append all form inputs to the formData Dropzone will POST
            var data = $('#frmTarget').serializeArray();
            $.each(data, function(key, el) {
                formData.append(el.name, el.value);
            });
        });
    }
}
31
Don't Panic