2016-06-10 104 views
0

嗨,我是jquery和dropzone庫的新手, 我無法使用dropzone上傳文件。我想使用dropzone做多個文件上傳,只要拖放dropzone中的多個圖像或文檔,然後點擊提交,我已經編輯並更改了我的所有代碼,但仍然無法正常工作。我無法將文件移動或上傳到文件夾。 請任何幫助和建議。我在這裏用作參考https://github.com/enyo/dropzone/wiki/Combine-normal-form-with-DropzoneDropzone無法上傳文件到文件夾

的Javascript

var unique = 'ufiles'; 
Dropzone.options.myAwesomeDropzone = { 
    url: "../../scripts/submission-upload.php", 
    autoProcessQueue: false, 
    autoDiscover: false, 
    uploadMultiple: true, 
    parallelUploads: 100, 
    paramName: unique, 
    previewsContainer: ".dropzone-previews", 
    maxFilesize: 50, //MB 
    maxFiles: 100, 
    acceptedFiles: "image/*, application/pdf, .doc, .docx", 
    addRemoveLinks: true, 
    dictRemoveFile: 'Remove', 
    dictFileTooBig: 'File is bigger than 50MB', 
    accept: function(file, done) { 
     console.log("uploaded"); 
     done(); 
    }, 
    error: function(file, msg){ 
     alert(msg); 
    }, 
    init: function() { 
     var myDropzone = this; 

     // First change the button to actually tell Dropzone to process the queue. 

     $('input[type=submit]').on("click", function(e){ 
      e.preventDefault(); 
      e.stopPropagation(); 
      myDropzone.processQueue(); 
      //$("#upload-forms").submit(); 
     }); 
     // 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. 
      $("#upload-forms").submit(); 
     }); 
     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 
     }); 
    } 
} 

上傳PHP

$uploaddir = '../submissions/'; 
$uploadfile = $uploaddir.$_FILES['ufiles']['name']; 
foreach ($FILE['ufiles']['tmp_name'] as $file) { 
    echo $file; 
    if (move_uploaded_file($_FILES['ufiles']['tmp_name'], $uploadfile)) { 
    echo "File is valid, and was successfully uploaded.\n"; 
    } else { 
    echo "Error!\n"; 
    } 
} 

HTML

<form method="post" action="scripts/submission-upload.php" id="upload-forms" enctype="multipart/form-data"> 
    <div class="dropzone dropzone-previews" id="my-awesome-dropzone"> 
    <div class="fallback"> 
     <input name="file[]" type="file" multiple> 
    </div> 
    </div> 
<button type="submit" class="btn btn-default">Submit</button> 
</form> 
+0

您是否在控制檯中發現任何錯誤? – user3284463

+0

不,它只是無法找到id =「uploadedfiles」,即使我嘗試echo $ uploadfile; –

+0

試試'echo $ _FILES ['file'] ['name']' – user3284463

回答

0

的用於內部提交按鈕m標籤觸發兩個事件,即它的默認表單提交和你的功能。您需要在默認表單提交之前執行您的功能。 而不是做這個

$('#submit').submit(function(){ 
    dropzone.processQueue(); 
}); 

做這個

<form onsubmit="return someFunction();" ...> 

而且這樣寫

function someFunction(){ 
    dropzone.processQueue(); 
    return false; 
} 

功能我發現了一個類似的解決方案在這裏也Javascript shortcuts for loops, conditions and return functions

+0

感謝您的回覆,我嘗試了它不起作用的方法..我嘗試echo $ _FILES ['file'] ['名稱'];它出來什麼都沒有.. –

0

懸浮窗name參數設置爲file作爲默認值。如果你想改變它,你可以用paramName來改變它。

因此,在您的PHP中,您將嘗試使用$_FILES['file']而不是id獲取文件數組。

由於您將要上傳多個文件並且uploadMultiple設置爲true,您需要遍歷$_FILES['file']數組。看看這個:

$uploaddir = '../submissions/'; 

foreach($_FILES['file'] as $file){ 
    $uploadfile = $uploaddir.$file['name']; 
    // Move file here etc... 
} 
+0

我試試echo $ _FILES ['file'] ['name']它出來什麼也沒有:( –