Question

我试图在浏览器中将图像拖放到div中。就像在Gmail编写中一样，我想让图像显示为内联并且可以调整大小。我想知道JQuery中是否有任何函数或插件可以启用它？我见过一些像http://www.dropzonejs.com/这样的开源软件，但我想构建一个我自己的应用程序。该图像将使用POST发布到NodeJs + Express服务器。

所以我希望有一个函数，你可以在div中拖放文件，在上传到服务器之前检查文件的有效性 - 这样文件就可以在客户端上呈现服务器中的位置。理想情况下，我喜欢这样的事情。

<div id = "imageUploader" ....> </div>

$("#imageUploader").onDraggedAndDropped{

  validity: function(){
  //Check if valid size and filetype
  //return true or false otherwise
  }

  //File upload not successful
  error: function(error){
  ...
  }

  //File upload successful
  error: function(data){
  var path = JSON.stringify(data).filepath;
  render(filepath);
  }

}

Answer 1

使用库Jquery-File-Upload。它支持拖放文件上传，但兼容支持HTML5的浏览器。 http://hayageek.com/drag-and-drop-file-upload-jquery/

Answer 2

您可以尝试使用这些插件上传图片

http://www.appelsiini.net/2009/10/drag-and-drop-file-upload-with-google-gears http://www.appelsiini.net/2009/10/html5-drag-and-drop-multiple-file-upload

是否可以使用JQuery拖放和上传图像？

2 个答案: