這篇文章主要為大家展示了“WebUploader客戶端如何批量上傳圖片”,內(nèi)容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領大家一起研究并學習一下“WebUploader客戶端如何批量上傳圖片”這篇文章吧。
創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設,柳北企業(yè)網(wǎng)站建設,柳北品牌網(wǎng)站建設,網(wǎng)站定制,柳北網(wǎng)站建設報價,網(wǎng)絡營銷,網(wǎng)絡優(yōu)化,柳北網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè),幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿,時刻以成就客戶成長自我,堅持不斷學習、思考、沉淀、凈化自己,讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。
具體內(nèi)容如下
因為最近主管讓用webUploader寫客戶端,但是在網(wǎng)上找了很多,能夠復制就能用的并沒有幾個,但是經(jīng)過修改后還可以,為了后面的人在需要使用到的時候可以直接copy我再此將代碼和注釋共享在這里。
這里是前臺代碼,這里我不過是加了個注釋和修改了一點東西,這是網(wǎng)絡上某個大神的代碼 我借鑒一下。
這個webUploader 使用其實很簡單,我先簡單做一個描述。理解就很快了。
先準備好選擇文件的元素吧,還有顯示縮略圖的元素,當然還有手動才需要的一個提交按鈕。
第一步:js中是先創(chuàng)建一個webUploaer的對象,創(chuàng)建的時候?qū)ο笥性S多參數(shù),你參數(shù)的選擇決定了你啟動哪些功能。
第二步:loader對象有很多的事件,你可以通過為loader綁定不同的事件,就可以監(jiān)聽到不同的動作了,從而對它進行相應的操作。
第三步:就是使用該對象的upload()方法進行手動的上傳啦!
至于我剛剛說的很多參數(shù)和很多事件。
我會附上一個webUploaderAPI的地址,上面寫的非常詳細,閱讀量也不大。
圖片上傳
選擇文件
然后這里是后臺我使用spring封裝方法寫的接收數(shù)據(jù), 這些代碼復制就可以使用了,對了 這是一個接收多文件的方法,上面的客戶端代碼也支持多圖片上傳。其實圖片和文件差別不大 不過是將客戶端的文件限制去掉,當然縮略圖也可以丟掉,那就是文件上傳啦。具體還是看客戶端的webuploaderAPI。
@RequestMapping("uploader") public void upload(HttpServletRequest request,HttpServletResponse response){ System.out.println("收到圖片!"); MultipartHttpServletRequest Murequest = (MultipartHttpServletRequest)request; Mapfiles = Murequest.getFileMap();//得到文件map對象 String upaloadUrl = request.getSession().getServletContext().getRealPath("/")+"upload/";//得到當前工程路徑拼接上文件名 File dir = new File(upaloadUrl); System.out.println(upaloadUrl); if(!dir.exists())//目錄不存在則創(chuàng)建 dir.mkdirs(); for(MultipartFile file :files.values()){ counter++; fileName=file.getOriginalFilename(); tagetFile = new File(upaloadUrl+fileName);//創(chuàng)建文件對象 if(!tagetFile.exists()){//文件名不存在 則新建文件,并將文件復制到新建文件中 try { tagetFile.createNewFile(); } catch (IOException e) { e.printStackTrace(); } try { file.transferTo(tagetFile); } catch (IllegalStateException e) { e.printStackTrace(); } catch (IOException e) { e.printStackTrace(); } } } System.out.println("接收完畢"); }
以上是“WebUploader客戶端如何批量上傳圖片”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學習更多知識,歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道!