jQuery拖放图像上传功能

我想通过jQuery编写我自己的简单AJAX图像上传脚本。我发现了一些插件，但是它们对于需要的东西太定制了，我无法让它们中的任何一个正常工作。jQuery拖放图像上传功能

我只是想以某种方式检测用户拖放图像到页面上。从那里我肯定它不难上传数据，并进入一个/缓存/目录，并允许更多选项..

但现在我完全卡住了拖放功能。从字面上不知道我应该如何解决这个问题。需要什么样的事件处理程序？我需要自定义代码我自己的事件处理程序吗？任何建议将不胜感激

来源

2012-06-24 Jake

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

具体看看这个文件和onDrop方法：https：//github.com/blueimp/jQuery-File-Upload/blob/master/js/ jquery.fileupload.js – swatkins

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

Drag'n'drop需要一个HTML5浏览器 - 但现在几乎所有这些。

我建议不要从头开始，因为有相当多的代码需要 - 我非常喜欢这个包装，它实现了它作为一个jQuery插件。

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

带班格在文档中定义的元素后，您可以初始化它接受丢弃的文件有：

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>但它是很好的做一个漂亮的大目标，上面写着“拖到此处”，使用户不会混乱，他们需要删除该文件。

来源

2012-07-27 08:31:26 Danack

可能太晚了。但你应该结账http://www.dropzonejs.com/

来源

2015-03-02 14:35:30 roopunk

jQuery拖放图像上传功能

回答

相关问题