我试图通过jQuery编写我自己的简单的
AJAX图像上传脚本.我已经找到了一些插件,但是它们的定制方式太多了,因此我无法使任何工作正常.
我只是想以某种方式检测用户何时拖动并将图像放到页面上.从那里我确定不难上传数据并移动到/ cache /目录,并允许进一步的选项..
但是现在我完全坚持拖放功能.字面上不知道我应该如何处理这个.需要什么样的事件处理程序？我需要自定义代码我自己的事件处理程序吗？任何建议将不胜感激
解决方法
What kind of event handler is needed?
Drag’n’drop需要一个HTML5浏览器 – 但现在几乎都是这样.
我建议不要从头开始,因为有相当多的代码需要 – 我很喜欢这个包装器,它实现它作为一个jQuery插件.
http://www.github.com/weixiyen/jquery-filedrop
在使用class 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,currentProgress){
//Logger.log("fileUploadUpdate(index,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,json,timeDiff){
var divID = getDivID(index,file);
fileSetUploadPercent(100,divID);
if(json.status == "OK"){
createThumbnailDiv(index,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,i) {
// alert(err);
// },uploadStarted: fileUploadStarted,uploadFinished: fileUploadFinished,progressUpdated: fileUploadUpdate,// speedUpdated
});
接受上传的网页位有此HTML.
<div class='fileDrop'> Upload a file by dragging it. <span id='fileDropTarget'/> </div>
