plupload這個插件可實現拖拽文件到指定區域就可上傳的功能

使用步驟如下：

第一步：導入js，css。

第二步：寫一個html頁面，定義一個id，然后ajax提交

第三步：寫后臺代碼，復制文件，保存復制文件后的文件路徑

代碼如下：

html：

#set($layout = "partner/shared/layout.vm") #set($css="<link rel='stylesheet' type='text/css' href='/system/scripts/plupload/jquery.plupload.queue/css/<span style="background-color: rgb(255, 255, 102);">jquery.plupload.queue.css</span>'> ") #set($js=" <script type='text/javascript' src='/system/scripts/plupload/<span style="background-color: rgb(255, 255, 102);">plupload.full.min.js</span>'></script> <script type='text/javascript' src='/system/scripts/plupload/jquery.plupload.queue/<span style="background-color: rgb(255, 255, 102);">jquery.plupload.queue.js</span>'></script> <script type='text/javascript' src='/system/scripts/plupload/i18n/<span style="background-color: rgb(255, 255, 102);">zh_CN.js</span>'></script> ") <style type="text/css"> .plupload_scroll .plupload_filelist {height: 80px;background: #F5F5F5;overflow-y: hidden; } </style><script type="text/javascript"> $(function () {$("#uploader").pluploadQueue({ // General settings runtimes : 'html5,gears,browserplus,silverlight,flash,html4', url : <span style="background-color: rgb(255, 255, 102);">'/system/sellers/product/test.shtml</span>', max_file_size : '20mb', unique_names: true, chunk_size: '2mb', // Specify what files to browse for filters : [ {title: "voice files", extensions: "jpg"}, {title: "Zip files", extensions: "zip"} ], // Flash settings flash_swf_url: '/system/scripts/plupload/Moxie.swf', // Silverlight settings silverlight_xap_url: '/system/scripts/plupload/Moxie.xap', // 參數 multipart_params: {'bookId': '$!bookId'}, multi_selection:false,});$("#uploader").pluploadQueue().bind("UploadComplete", function(up, files) {jAlert("上傳成功", "消息提醒",function(){window.location.reload();//刷新當前頁面.}); }); $("#uploader").pluploadQueue().bind("FilesAdded", function(up, files) {//單一上傳，如果不需要直接刪除這個方法$.each(up.files, function (i, file) {if (up.files.length <= 1) {return;}up.removeFile(file);});}); }) </script> #set($path=$global.resServer) <div class="container"><div class="row"><div class="col-md-12"><div class="widget wgreen"><div class="widget-head"><div class="pull-left">視頻</div><div class="widget-icons pull-right"><a href="/system/sellers/product/picture_books.shtml#msellers_#picturebook" class="btn btn-info">返回</a><a href="#" class="wminimize"><i class="icon-chevron-up"></i></a></div><div class="clearfix"></div></div><div class="widget-content"><div class="padd"><!-- Form starts. --><form class="form-horizontal" method="post" action="/system/product/edit.shtml" name="product_validate"id="product_validate" novalidate="novalidate" enctype="multipart/form-data"><input type="hidden" id="id" name="id" value="$!model.id" /><hr><div class="form-group"><label class="col-lg-4 control-label" style="padding:0px 2px;">上傳</label><div class="col-lg-4"><div id="<span style="background-color: rgb(255, 255, 51);">uploader</span>" ></div></div></div><hr></form></div></div></div></div></div> </div>
action

@FireAuthority(authorityTypes = AuthorityType.SYSTEM)@RequestMapping(value = "/test", method = RequestMethod.POST)public @ResponseBody String test(){long bookId = getFormForLong("bookId", 0);MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;MultipartFile file = multipartRequest.getFile("file");String path = "";SellersProductPO sp = sellersProductService.getById(bookId);if (file != null &&file.getSize() > 0) {try {if(sp.getAudiobook()!=null){storageService.delete(sp.getAudiobook());}String fileName = FileNameUtil.generateFileName();path = storageService.update("audiobook/", fileName + ".jpg", file.getInputStream());sp.setAudiobook(path);//把路徑放入對象中 } catch (IOException e) {e.printStackTrace();}}sellersProductService.edit(sp);//保存對象return SUCCESS;}storageservice：
@Overridepublic String update(String pathPrefix, String fileName, InputStream dataInputStream) throws IOException {byte[] streamArray = IOUtils.readStreamAsBytesArray(dataInputStream);long contentLength = streamArray.length;InputStream streamForFull = new ByteArrayInputStream(streamArray);String path = putObject(pathPrefix + fileName, streamForFull, contentLength);streamForFull.close();return path;}
這個工具可以指定各個文件的類型和上傳單個或多個。

總結

以上是生活随笔為你收集整理的plupload插件使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。