jQuery 拖放图片上传功能
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11179834/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Drag-and-Drop Image Upload Functionality
提问by Jake
I am trying to code my own simple AJAX image upload script via jQuery. I have found some plugins but they are way too customized for what's needed, and I cannot get any of them working properly.
我正在尝试通过 jQuery 编写我自己的简单 AJAX 图像上传脚本。我找到了一些插件，但它们对于需要的东西来说太定制了，我无法让它们中的任何一个正常工作。
I just want to somehow detect when the user drags and drops an image onto the page. From there I'm sure it's not hard to upload that data and move into a /cache/ directory and allow for further options..
我只是想以某种方式检测用户何时将图像拖放到页面上。从那里我确信上传这些数据并移动到 /cache/ 目录并允许进一步的选择并不难。
but right now I'm totally stuck with the drag/drop functionality. Literally no idea how I should approach this. What kind of event handler is needed? Will I need to custom code my own event handler? Any advice would be more than appreciated
但现在我完全坚持拖/放功能。完全不知道我应该如何处理这个问题。需要什么样的事件处理程序？我需要自定义代码我自己的事件处理程序吗？任何建议将不胜感激
采纳答案by Danack
What kind of event handler is needed?
需要什么样的事件处理程序？
Drag'n'drop requires a HTML5 browser - but that's pretty much all of them now.
Drag'n'drop 需要 HTML5 浏览器 - 但现在几乎就是所有这些。
I'd recommend not starting from scratch as there's quite a bit of code needed - I quite like this wrapper that implements it as a jQuery plugin.
我建议不要从头开始，因为需要很多代码 - 我非常喜欢这个将它实现为 jQuery 插件的包装器。
http://www.github.com/weixiyen/jquery-filedrop
http://www.github.com/weixiyen/jquery-filedrop
After defining an element in the document with class div, you can initialise it to accept dropped files with:
在使用类 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
});
The bit of the web page that accepts uploads has this HTML.
接受上传的网页部分具有此 HTML。
<div class='fileDrop'>
Upload a file by dragging it.
<span id='fileDropTarget'/>
</div>
The file drop works on the outer <div> but it's nice to make a nice big target that says 'DROP HERE' so that users aren't confused about where they need to drop the file.
文件放置在外部 <div> 上有效，但最好制作一个很好的大目标，上面写着“DROP HERE”，这样用户就不会对需要放置文件的位置感到困惑。
回答by roopunk
Probably too late. But you should checkout http://www.dropzonejs.com/
恐怕为时已晚。但你应该检查http://www.dropzonejs.com/
