將常規表單與Dropzone結合使用

我正在使用dropzone.js創建拖放區表單。我首先將表單設置爲自動上傳文件，這工作正常，但我調整了表單，只有在用戶提交數據時才工作，我添加了一個名爲custom_dropzone.js的文件，表單似乎可以正常工作，但文件卻從未上傳到文件夾。將常規表單與Dropzone結合使用

HTML代碼（的index.php）

<!doctype html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Untitled Document</title> 
<head> 
<link href="css/dropzone.css" type="text/css" rel="stylesheet" /> 
<script src="dropzone.min.js"></script> 
<script src="custom_dropzone.js"></script>

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

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

upload.php的

<?php 
$ds   = DIRECTORY_SEPARATOR; //1 

$storeFolder = '../upload_test/uploads'; //2 

if (!empty($_FILES)) { 


$tempFile = $_FILES['file']['tmp_name'];   //3    

$targetPath = dirname(__FILE__) . $ds. $storeFolder . $ds; //4 

$targetFile = $targetPath. $_FILES['file']['name']; //5 


$allowed = array('gif','png' ,'jpg'); 
$filename = $_FILES['file']['name']; 
$ext = pathinfo($filename, PATHINFO_EXTENSION); 
if(!in_array($ext,$allowed)) { 
echo 'error'; 
} 

move_uploaded_file($tempFile,$targetFile); //6 

} 
?>

個

新的JS custom.dropzone.js這似乎打破了upload.php的功能

Dropzone.options.myAwesomeDropzone = { // The camelized version of the ID of the form  element 

    // The configuration we've talked about above 
    autoProcessQueue: false, 
    uploadMultiple: true, 
    parallelUploads: 3, 
    maxFiles: 3, 
    previewsContainer: ".dropzone-previews", 

    accept: function(file, done) { 
    console.log("uploaded"); 
    done(); 
    }, 

    init: function() { 
    this.on("maxfilesexceeded", function(file){ 
    alert("No more files please!"); 
    }); 
}, 

// 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) { 
    // Make sure that the form isn't actually being sent. 
    e.preventDefault(); 
    e.stopPropagation(); 
    myDropzone.processQueue(); 
    }); 

    // Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead 
    // of the sending event because uploadMultiple is set to true. 
    this.on("sendingmultiple", function() { 
    // Gets triggered when the form is actually being sent. 
    // Hide the success button or the complete form. 
    }); 
    this.on("successmultiple", function(files, response) { 
    // Gets triggered when the files have successfully been sent. 
    // Redirect user or notify of success. 
    }); 
    this.on("errormultiple", function(files, response) { 
    // Gets triggered when there was an error sending the files. 
    // Maybe show form again, and notify user of error 
    }); 
} 

}

感謝一個LLL你的幫助。我需要的只是要上傳的文件，否則每一件事似乎做工精細

來源

2014-01-08 Richard perris

隨着懸浮窗似乎你不需要方法= '後' ENCTYPE = '的multipart/form-data的' 喜歡什麼是由尚卡爾提到的......但謝謝

我從註釋掉以下行JS的解決了這個custom_dropzone.js
// uploadMultiple：真實，

來源

2014-01-08 16:00:33

你忘了添加enctype='multipart/form-data'您<form>作爲屬性和方法類型POST。

添加這樣的..

<form id="my-awesome-dropzone" method='post' class="dropzone" action="upload.php" enctype='multipart/form-data'>

來源

2014-01-08 07:53:35

我想，雖然我同意ÿ ou是正確的，該文件仍然無法上傳。感謝任何其他想法 –

嘗試對'upload.php'上的'var_dump（$ _ POST）'，然後查看出了什麼問題。 –

我之前和之前都試過。它不返回任何內容，就像upload.php文件完全被忽略一樣。我只是嘗試鏈接上傳文件夾和動作=「...與絕對路徑，但沒有幫助。似乎如果我添加自定義JS PHP函數被中止 –

將常規表單與Dropzone結合使用

回答

相關問題