2013-03-24 35 views
2

即時通訊IM完全套牢Dropzone.js,我想創建一個快捷的文件拖放上傳Dropzone.js如何序列化值併發送它?

設置它是好的

<form id='test' enctype="multipart/form-data"> 
    <input type="text" name="album_name"> 
    <div id="myId" class="dropzone"> 

    </div> 
    <button type="submit" id="newAlbum">go go</button> 
</form> 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="http://malsup.github.com/jquery.form.js" type="text/javascript" charset="utf-8"></script> 
<script src="https://raw.github.com/enyo/dropzone/master/downloads/dropzone.js" type="text/javascript" charset="utf-8"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $("#myId").dropzone({ 
     paramName: 'photos', 
     url: "post.php", 
     dictDefaultMessage: "Drag your images", 
     clickable: true, 
     enqueueForUpload: true, 

     selectedfiles: function() 
     { 
      $('#newAlbum').show(); 
     } 
    }); 

}); 
</script> 

但我不知道熱連載的形式,並將其發送

可以請別人給我看一個例子嗎?

回答

3

如果enqueueForUpload設置爲true(默認值),則文件將以普通的文件上傳形式直接上傳。

就你而言,你需要在post.php有你的上傳腳本。在那裏,該文件將以$_FILES['photos']paramName)進入。這個文件名默認是'文件',但你設置它不同。

這是否清楚?

所以一個簡單的例子,爲您post.php -file的內容:

if(!empty($_FILES)){ 
    move_uploaded_file($_FILES['photos']['tmp_name'],'http://mysite.com/myDir'); 
} 
3

如果輸入外部形狀就可以增加價值,形成

<input type="text" name="album_name">  
<form id='test' enctype="multipart/form-data">  
    <div id="myId" class="dropzone"> 

    </div> 
    <button type="submit" id="newAlbum">go go</button> 
</form> 
<script type="text/javascript"> 
    Dropzone.autoDiscover = false; 

    jQuery(function() { 

     var myDropzone = new Dropzone("#test",{ 
      url: "post.php", 
      addRemoveLinks: true, 
      maxFilesize: 1, 
      maxFiles: 5, 
      uploadMultiple: false, 
      parallelUploads: 100, 
      createImageThumbnails: true, 
      paramName: "photos", 
      autoProcessQueue: false 
     }); 

     var submitButton = document.querySelector("#newAlbum"); 
     submitButton.addEventListener("click", function() { 

      myDropzone.on("sending", function(file, xhr, formData) { 
       formData.append("album_name", $("input[name=album_name]").val());  
      }); 
      myDropzone.processQueue(); // Tell Dropzone to process all queued files. 
      alert('show this to have time to upload'); 
     }); 

    }); 
</script> 
相關問題