Springmvc+jquery file drag and drop upload, select upload

Recently done a simple file upload function, JSP version, follow-up will improve more features, but now can be used, the need for small partners, direct reference to the following file content directly copy to their own project is OK, the effect

FILEUPLOAD.CSS:

. fileupload_box {position:relative;width:100%;height:100%;border:3px dashed #E5E5E5; Text-align:center;z-index: 2000;cursor:pointer;margin:0 Auto;}. fileupload_message {position:absolute;font-size:15px;color: #999; Font-weight:normal;height:30px;top:20px;width: 100%;}. Odao_browser{position:absolute;width:50%;height:36px;line-height:36px;left:25%;bottom:10px;-moz-border-radius: 3px; /* Firefox  /-webkit-border-radius:3px,/* Safari and Chrome */  border-radius:3px,/* Opera 10.5+, and IE using IE-CSS3 Browser *  /background: #5c6bc0;  Color:white;  Cursor:pointer;}. Odao_browser input {position:absolute;top:0;width:100%;height:100%;opacity:. 0;filter:alpha (opacity= 0);d irection: Ltr;cursor:pointer;}

Odao_fileupload_plugin.js:

(function ($) {$.fn.odao_fileupload=function (setting) {var defaults = {Url:document.    URL, method: ' POST ', Extradata: {}, maxfilesize:0, maxfiles:0, allowedtypes: ' * ', extfilter:null, Datatype:null, FileName: ' File ', Onuploadsuccess:function (Filename,url) {}};setting = $.extend ({},defaults,settin g) var fn = {init:function () {var _this = this;//Drag file upload var $targetBox = document.getElementById ($ (_this). attr (' id ')); $        Targetbox.addeventlistener ("Drop", function (e) {//Cancel default browser drag effect E.preventdefault ();        var fileList = e.datatransfer.files;        Fn.upload.call (_this,filelist[0]); }, False);//Select File to upload $ (_this). Find (' input '). On (' Change ', function (e) {var file = E.target.files;var file = File.item (0); Fn.upload.call (_this,file);});},upload:function (file) {if (Fn.checktype (file)) Return;var _this = This;var FD = new       FormData ();       Fd.append (' Files ', file); $.ajax ({URL: $ctx + "/fileupload/xxxxx.do", type: ' POST ', succEss:function (data) {if (data.success) Setting.onUploadSuccess.call (_this,file.name,data);           }}, Error:function () {showreturnmsg (' upload failed ', ' error '); }, DATA:FD, Cache:false, Contenttype:false, processdata:false});},//allowed on The file type checktype:function (file) {if (setting.allowedtypes! = ' * ' && setting.allowedTypes.indexOf (File.type)        = =-1) {showreturnmsg (' file format error, can only upload ' +setting.allowedtypes+ ' format file ', ' Error ');        return true;  } return False}};return This.each (function (i,n) {Fn.init.call ($ (n));});};  $ (document). On (' DragEnter ', function (e) {e.stoppropagation (); E.preventdefault ();});  $ (document). On (' DragOver ', function (e) {e.stoppropagation (); E.preventdefault ();}); $ (document). On (' Drop ', function (e) {e.stoppropagation (); E.preventdefault ();}) (JQuery);

Jsp:

<div id= "Target_box" class= "Fileupload_box" >
<p class= "Fileupload_message" > Drag the picture here </p>
<p class= "Odao_choosefileupload odao_browser" > select File
<input type= "file" name= "Files" multiple= "multiple" >
</p>

Call Method:

$ (' #target_box '). Odao_fileupload ({      onuploadsuccess:function (filename,attachmenturl) {      ///Save the upload file information and record the log $. Ajax ({type: "post", url: ', data: {'}, DataType: "JSON", success:function (data) {  if (data.success) {    alert (' Upload success ');   } else{        alert (' upload failed ');}}  );       },       allowedtypes: ' Image/png '});

Spring Configuration:

<!--file Upload related--><bean id= "multipartresolver"  class= " Org.springframework.web.multipart.commons.CommonsMultipartResolver ">        <!--One of the properties available ; The maximum upload size in bytes 100m-->        

Fileupload.java:

@RequestMapping ("/uploadprojectbgpicture.do") public String uploadprojectbgpicture (@RequestParam multipartfile[] Files,httpservletrequest request,httpservletresponse response) throws ioexception{     specific operation content      

Springmvc+jquery file drag and drop upload, select upload