Dropzone上傳按鈕

我想添加一個按鈕上傳到我的dropzone文件上傳。目前它在選擇或拖拽文件到dropzone區域後直接上傳文件。我想要做的是： 1.選擇或拖動要上傳的文件。 2.驗證 3.點擊或按按鈕上傳上傳文件。Dropzone上傳按鈕

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 POST請求

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."; 
     } 
     } 
    }

來源

2017-10-13 Gael Musikingala

我試圖實現你的答案，但我得到一個錯誤說myDropzone沒有定義。我不知道這可能是因爲我不是以編程方式定義dropzone？我仍然在搞清楚我缺少的東西。 –

我更新了我的代碼，請重試。 –

您需要：

添加一個按鈕：

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

告訴懸浮窗不，當你刪除它上傳的文件。這與the autoProcessQueue config option做：
```
autoProcessQueue: false 
```
由於懸浮窗不會自動上傳文件，你需要手動告訴它這樣做，當您點擊按鈕。所以，你需要爲按鈕單擊事件處理程序：
```
$("#button").click(function (e) { 
    e.preventDefault(); 
    myDropzone.processQueue(); 
}); 
```
這將只是張貼上傳的文件，沒有任何其他的輸入字段。您可能想要發佈所有字段，例如您的refCampaignID等。爲此，您需要在發送之前將它們複製到POST中。懸浮窗有一個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); 
      }); 
     }); 
    } 
}

來源

2017-10-13 15:04:37

非常感謝。它的工作非常漂亮。 –

Dropzone上傳按鈕

回答

相關問題