拖放文件上傳

所以我很努力地找到我要找的東西以及如何實現它。拖放文件上傳

我有一個基本的PHP文件上傳工作，用戶按下自定義上傳按鈕，選擇一個文件，然後使用JS，它檢查一個變化（即用戶選擇一個文件），然後提交表單它可以很好地上傳圖片。

我現在還想要的是拖動&拖放上傳區域。因此，用戶可以從他們的文件瀏覽器中拖動圖像並將其放在指定的位置（而不是整個頁面），然後一旦該圖像被刪除以便表單自動提交圖像並使用相同的PHP處理。

這是可能的和現實的？

來源

2013-02-12 Tenatious

這是絕對現實的，可能沒有使用任何第三方插件。

下面的代碼片段應該給你的是如何工作的一個想法：

拖放區域

$(".drop-files-container").bind("drop", function(e) { 
    var files = e.originalEvent.dataTransfer.files; 
    processFileUpload(files); 
    // forward the file object to your ajax upload method 
    return false; 
});

的processFileUpload（） - 方法：

function processFileUpload(droppedFiles) { 
     // add your files to the regular upload form 
    var uploadFormData = new FormData($("#yourregularuploadformId")[0]); 
    if(droppedFiles.length > 0) { // checks if any files were dropped 
     for(var f = 0; f < droppedFiles.length; f++) { // for-loop for each file dropped 
      uploadFormData.append("files[]",droppedFiles[f]); // adding every file to the form so you could upload multiple files 
     } 
    } 

// the final ajax call 

     $.ajax({ 
     url : "upload.php", // use your target 
     type : "POST", 
     data : uploadFormData, 
     cache : false, 
     contentType : false, 
     processData : false, 
     success : function(ret) { 
       // callback function 
     } 
     }); 

}

表格示例

<form enctype="multipart/form-data" id="yourregularuploadformId"> 
    <input type="file" name="files[]" multiple="multiple"> 
</form>

隨意使用這樣的東西作爲一個起點。該瀏覽器支持的這個你可以在這裏找到http://caniuse.com/#feat=xhr2

當然，你可以添加你喜歡希望進度條，預覽動畫任何額外的...

來源

2013-02-12 15:10:59 wildhaber

你可能可以解釋'if（droppedFiles.length> 0 ）{（f = 0; f Tenatious 2013-02-12 15:50:16

@Tenatious我在那裏添加了一些評論。但它是一個正常的for-loop，它將刪除的文件添加到表單中。 – wildhaber 2013-02-12 16:11:34

啊我明白了。我設法讓它上傳。謝謝您的幫助！:) – Tenatious 2013-02-12 16:21:49

請查看這個jQuery插件！使用Ajax文件上傳和更多如：選擇多個文件http://blueimp.github.com/jQuery-File-Upload/

文件上傳控件，拖拽&拖放支持，進度條和預覽圖像jQuery的。支持跨域，分塊和可恢復文件上傳和客戶端圖像大小調整。適用於支持標準HTML表單文件上傳的任何服務器端平臺（PHP，Python，Ruby on Rails，Java， Node.js，Go等）。

來源

2013-02-12 14:41:14 Niels

我有孫中山這個插件，但它只是似乎複雜了什麼我想要做？ – Tenatious 2013-02-12 14:42:39

您將定義需要類似這樣的東西，因爲通過ajax的文件傳輸不可能沒有幫助。例如jqueryform.js http://malsup.com/jquery/form/也有一個用於在航班上傳的ajaxForm，非常容易使用http://malsup.com/jquery/form/#ajaxForm – 2013-02-12 14:43:22

如此困惑，從哪裏開始xD – Tenatious 2013-02-12 15:06:54

拖放文件上傳

回答

相關問題