jQuery拖放图片上传功能

Question

我正试图通过jQuery编写自己的简单AJAX图片上传脚本。我找到了一些插件，但它们对所需内容定制过度，并且我无法使它们正常工作。

我只想以某种方式检测用户何时将图片拖放到页面上。从那里开始，我相信上传数据并移动到/cache/目录并允许进一步选项不难。但现在，我完全被卡在了拖放功能上。我真的不知道该如何解决这个问题。需要哪种事件处理程序？我需要自定义编写我的事件处理程序吗？任何建议都将不胜感激。

- Jake

---

看一下这个插件（不是用它，而是查看源代码）。他们实现了一个类似于你想要的拖放功能。https://github.com/blueimp/jQuery-File-Upload - swatkins

请特别查看此文件和onDrop方法：https://github.com/blueimp/jQuery-File-Upload/blob/master/js/jquery.fileupload.js - swatkins

Answer 1

需要什么类型的事件处理程序？

拖放功能需要使用 HTML5 浏览器，但这几乎是现在所有浏览器的标配。

我建议不要从头开始编写代码，因为需要相当多的代码。我很喜欢这个包装器，它将其实现为 jQuery 插件。

http://www.github.com/weixiyen/jquery-filedrop

在文档中定义一个带有类 div 的元素后，您可以通过以下方式初始化该元素以接受拖放文件：

function fileSetUploadPercent(percent, divID){

    var uploadString = "Uploaded " + percent + " %";

    $('#'.divID).text(uploadString);
}
function fileUploadStarted(index, file, files_count){

    var divID = getDivID(index, file);

    createFileUploadDiv(divID);     //create the div that will hold the upload status

    fileSetUploadPercent(0, divID); //set the upload status to be 0
}

function  fileUploadUpdate(index, file, currentProgress){

    //Logger.log("fileUploadUpdate(index, file, currentProgress)");

    var string = "index = " + index + " Uploading file " + file.fileName + " size is " + file.fileSize + " Progress = " + currentProgress;
    $('#status').text(string);

    var divID = getDivID(index, file);
    fileSetUploadPercent(currentProgress, divID);
}

function fileUploadFinished(index, file, json, timeDiff){

    var divID = getDivID(index, file);
    fileSetUploadPercent(100, divID);

    if(json.status == "OK"){
        createThumbnailDiv(index, file, json.url, json.thumbnailURL);
    }
}



function    fileDocOver(event){
    $('#fileDropTarget').css('border', '2px dashed #000000').text("Drop files here");
}
$(".fileDrop").filedrop({

            fallback_id: 'fallbackFileDrop',
            url: '/api/upload.php',
            //    refresh: 1000,
            paramname: 'fileUpload',
            //    maxfiles: 25,           // Ignored if queuefiles is set > 0
            maxfilesize: 4,         // MB file size limit
            //    queuefiles: 0,          // Max files before queueing (for large volume uploads)
            //    queuewait: 200,         // Queue wait time if full
            //    data: {},
            //    headers: {},
            //    drop: empty,
            //    dragEnter: empty,
            //    dragOver: empty,
            //    dragLeave: empty,
            //    docEnter: empty,
            docOver: fileDocOver,
        //  docLeave: fileDocLeave,
            //  beforeEach: empty,
            //   afterAll: empty,
            //  rename: empty,
            //  error: function(err, file, i) {
            //    alert(err);
            //  },
            uploadStarted: fileUploadStarted,
            uploadFinished: fileUploadFinished,
            progressUpdated: fileUploadUpdate,
            //     speedUpdated
        });

网页上负责上传的部分具有以下HTML代码。

<div class='fileDrop'>
Upload a file by dragging it.
<span id='fileDropTarget'/>

</div>

文件拖放功能可以在外部的<div>上使用，但最好制作一个漂亮的大目标，上面写着“在这里拖放”，这样用户就不会困惑于需要在哪里放置文件。

- Danack

Answer 2

也许已经太晚了，但你应该查看http://www.dropzonejs.com/。

- roopunk