这是绝对现实和可能的不使用任何第三方插件。

以下代码段应该提供一个如何工作的想法：

放置区域

  $（。drop-files-container）bind（drop ，function（e）{
 var files = e.originalEvent.dataTransfer.files; 
 processFileUpload（files）; 
 //将文件对象转发到您的ajax上传方法
 return false; 
}）; 
 

processFileUpload（） - 方法：

 函数processFileUpload（droppedFiles）{
 //将您的文件添加到常规上载表单
 var uploadFormData = new FormData（$（ #yourregularuploadformId）[0]）; 
 if（droppedFiles.length> 0）{//检查是否有任何文件丢失
 for（var f = 0; f< droppedFiles.length; f ++）{// for-loop for each文件丢失
 uploadFormData.append（files []，droppedFiles [f]）; //将每个文件添加到表单中，以便您可以上传多个文件
} 
} 

 //最终的ajax调用

 $ .ajax（ {
 url：upload.php，//使用您的目标
类型：POST，
 data：uploadFormData，
 cache：false，
 contentType： false，
 processData：false，
 success：function（ret）{
 //回调函数
} 
}）; 

} 
 

表单示例

 < form enctype =multipart / form-dataid =yourregularuploadformId> 
< input type =filename =files []multiple =multiple> 
< / form&gt 
 

随意使用像这样的起点。浏览器支持您可以在这里找到 http://caniuse.com/#feat=xhr2

当然，你可以添加任何你想要的进度条，预览，动画... ...

So I'm struggling a bit to find what I'm looking for and how to implement it.

I have a basic PHP file uploader working, in that a user presses a custom upload button, selects a file and then using JS, it checks for a change (Ie. the user selecting a file) and then submits the form which uploads the image fine.

What I also want now is a drag & drop to upload area. So the user can drag an image from their file explorer and drop it in a designated place (not the whole page) and then once that image has been dropped for the form to submit automatically with their image and use the same PHP processing.

Is this possible and realistic?

This is absolutely realistic and possible without using any third parties plugin.

The following snippets should give you an idea of how it could work:

Drop area

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

the processFileUpload()-Method:

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 example

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

Feel free to use something like this as a starting point. The browser support of this you can find here http://caniuse.com/#feat=xhr2

Of course you can add any extras you wish like progress bar, preview, animation...