015-图片文件上传
生活随笔
收集整理的這篇文章主要介紹了
015-图片文件上传
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1. 通常情況下, 我們上傳文件是借助type="file"的input標簽來完成的。layui圖片/文件上傳, 它所包含的強勁的功能, 還有靈活的UI。任何元素都可以作為上傳組件來調用, 譬如: 按鈕、圖片、普通的DIV等等, 而不再是一個單調的file文件域。
2. 模塊加載名稱: upload。
3. 核心方法與基礎參數選項
3.1. 使用upload模塊必須與upload.render(options)方法打交道, 其中的options即為基礎參數, 它是一個對象。
4. options參數詳見下表:
5. 服務端上傳接口
5.1. 設定一個URL地址給url參數, 用來告訴upload模塊的服務端上傳接口。像你平時使用Ajax一樣。
upload.render({elem: '#uploadImage' // 指向容器選擇器,url: 'fu.action' // 必填項, 服務端上傳接口,method: 'post' // 可選項, HTTP類型, 默認post,data: {uploadType: 1} // 可選項, 請求上傳接口的額外參數 });5.2. 該接口返回的相應信息(response)必須是一個標準的JSON格式。
6. 選擇文件的回調函數 - choose
6.1. choose回調在文件被選擇后觸發, 該回調會在before回調之前。一般用于非自動上傳(即auto: false)的場景, 比如: 預覽圖片等。
choose: function(obj){ // 預讀本地文件, 如果是多文件, 則會遍歷。obj.preview(function(index, file, result){console.log(index); // 得到文件索引console.log(file); // 得到文件對象console.log(result); // 得到文件base64編碼, 比如圖片var reader = new FileReader();reader.readAsDataURL(file);document.getElementById('preview').src = result;}); }6.2. choose回調函數的obj參數有4個方法:
// 將每次選擇的文件追加到文件隊列 var files = obj.pushFile();// 預讀本地文件, 如果是多文件, 則會遍歷。 obj.preview(function(index, file, result){obj.resetFile(index, file, '123.jpg'); // 重命名文件名// 重新上傳方法obj.upload(index, file); }7. 文件上傳前的回調函數 - before
7.1. before回調在choose回調之后、done/error回調之前觸發。返回的參數完全類似choose回調。一般用于上傳完畢前的loading、圖片預覽等。
upload.render({elem: '#uploadFile',url: 'fu.action',accept: 'file',exts: 'zip|rar|7z',before: function(obj){layer.load(); // 上傳loading},done: function(res, index, upload){alert('上傳完畢回調' + res.code);layer.closeAll('loading'); // 關閉loading},error: function(index, upload){alert('請求異常回調');layer.closeAll('loading'); // 關閉loading} });8. 上傳接口請求完成的回調函數 - done
8.1. 在上傳接口請求完畢后觸發, 但文件不一定是上傳成功的, 只是接口的響應狀態正常(200)。回調返回三個參數, 分別為: 服務端響應信息、當前文件的索引、重新上傳的方法:
done: function(res, index, upload){alert('上傳完畢回調'); }9. 上傳請求失敗的回調函數 - done
9.1. 當請求上傳時出現異常時觸發(如網絡異常、404/500等)。回調返回兩個參數, 當前文件的索引、重新上傳的方法:
error: function(index, upload){alert('請求異常回調'); }10. 多文件上傳完畢后的狀態回調函數 - allDone
10.1. 只有當開啟多文件時(即multiple: true), 該回調才會被觸發。回調返回一個object類型的參數, 包含一些狀態數據:
allDone: function(obj){ // 當文件全部被提交后, 才觸發console.log(obj.total); // 得到總文件數console.log(obj.successful); // 請求成功的文件數console.log(obj.aborted); // 請求失敗的文件數 }11. 文件上傳進度的回調函數 - progress
11.1. 在網速一般的情況下, 大文件的上傳通常需要一定時間的等待, 而瀏覽器并不會醒目地告知你它正在努力地上傳中, 此時為了提升用戶體驗, 我們可以通過該回調制作一個進度條。
progress: function(n, elem){var percent = n + '%' // 獲取進度百分比element.progress('progress', percent); // 可配合 layui進度條元素使用console.log(elem); // 得到當前觸發的元素 DOM對象。可通過該元素定義的屬性值匹配到對應的進度條。 }12. 重載實例
12.1. 有時你可能需要對upload.render()實例進行重載, 通過改變一些參數(如將上傳文件重置為只上傳圖片等場景)來重置功能。如:
// 創建一個實例 var uploadInst = upload.render({elem: '#id',url: '/api/upload/',size: 1024*5 // 限定大小 });// 重載該實例，支持重載全部基礎參數 uploadInst.reload({accept: 'images' // 只允許上傳圖片,acceptMime: 'image/*' // 只篩選圖片,size: 1024*2 // 限定大小 });13. 重新上傳
13.1. 在執行upload.render(options)方法時, 其實有返回一個實例對象, 以便對完成重新上傳等操作。注意: 這是對當前上傳隊列的全局重新上傳, 而choose回調返回的obj.upload(index, file) 方法則是對單個文件進行重新上傳。
var uploadInst = upload.render({elem: '#id',url: '/api/upload/',choose: function(obj){obj.preview(function(index, file, result){// 對上傳失敗的單個文件重新上傳, 一般在某個事件中使用obj.upload(index, file);});} });// 重新上傳的方法, 一般在某個事件中使用 uploadInst.upload();14. 例子
14.1. 新建一個動態的web工程-UploadLayui
14.2. 把layui拷貝到WebContent目錄下
14.3. 編寫upload.html
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>圖片文件上傳 - layui</title><link rel="stylesheet" href="layui/css/layui.css"><script type="text/javascript" src="layui/layui.js"></script></head><body><button type="button" class="layui-btn" id="selectImage"><i class="layui-icon"></i>選擇圖片</button> <button type="button" class="layui-btn" lay-active="uploadImage" ><i class="layui-icon"></i>上傳圖片</button><br /><br /><img id="preview" src="" alt="預覽圖片" /> <br /><br /><button type="button" class="layui-btn" id="uploadFile"><i class="layui-icon"></i>多文件上傳</button> <br /><br /><div lay-filter="progress" class="layui-progress layui-progress-big" lay-showPercent="true"><div class="layui-progress-bar layui-bg-blue" lay-percent="0%"></div></div><br /><br /><script type="text/javascript">layui.use(['util', 'element', 'layer', 'upload'], function() {var upload = layui.upload,element = layui.element,layer = layui.layer,util = layui.util;var uploadInst = upload.render({elem: '#selectImage' // 指向容器選擇器,url: 'fu.action' // 服務端上傳接口,data: {uploadType: 1} // 請求上傳接口的額外參數,accept: 'images' // 指定允許上傳時校驗的文件類型,acceptMime: 'image/jpg, image/png' // 規定打開文件選擇框時, 篩選出的文件類型,exts: 'jpg|png' // 允許上傳的文件后綴,auto: false // 是否選完文件后自動上傳,field: 'myphoto' // 設定文件域的字段名,size: 1024 * 20 // 設置文件最大可允許上傳的大小, 單位 KB,drag: true // 是否接受拖拽的文件上傳,choose: function(obj){ // 預讀本地文件, 如果是多文件, 則會遍歷。obj.preview(function(index, file, result){console.log(index); // 得到文件索引console.log(file); // 得到文件對象console.log(result); // 得到文件base64編碼, 比如圖片var reader = new FileReader();reader.readAsDataURL(file);document.getElementById('preview').src = result;});}// 執行上傳請求后的回調。返回三個參數, 分別為: res(服務端響應信息)、index(當前文件的索引)、upload(重新上傳的方法, 一般在文件上傳失敗后使用)。,done: function(res, index, upload){alert('上傳完畢回調' + res.code);}// 執行上傳請求出現異常的回調(一般為網絡異常、404等)。返回兩個參數, 分別為: index(當前文件的索引)、upload(重新上傳的方法)。,error: function(index, upload){// 請求異常回調alert('請求異常回調');}});util.event('lay-active', {uploadImage: function() {uploadInst.upload(); }});upload.render({elem: '#uploadFile',url: 'fu.action',data: {uploadType: 2},accept: 'file',acceptMime: '*',exts: 'zip|rar|7z',auto: true,field: 'enclosure' ,size: 1024 * 200,drag: true,multiple: true,number: 5,before: function(obj){layer.load(); // 上傳loading},progress: function(n, elem){var percent = n + '%' // 獲取進度百分比element.progress('progress', percent); // 可配合 layui進度條元素使用console.log(elem); // 得到當前觸發的元素 DOM對象。可通過該元素定義的屬性值匹配到對應的進度條。},done: function(res, index, upload){alert('上傳完畢回調' + res.code);layer.closeAll('loading'); // 關閉loading},allDone: function(obj){ // 當文件全部被提交后, 才觸發console.log(obj.total); // 得到總文件數console.log(obj.successful); // 請求成功的文件數console.log(obj.aborted); // 請求失敗的文件數},error: function(index, upload){alert('請求異常回調');layer.closeAll('loading'); // 關閉loading}});}); </script></body> </html>14.4. 拷貝上傳文件和谷歌json的相關jar
14.5. 編寫FdData.java實體類
package com.layui.upload;import java.io.Serializable;public class FdData implements Serializable {private static final long serialVersionUID = 1L;private String src;public FdData(String src) {super();this.src = src;}public String getSrc() {return src;}public void setSrc(String src) {this.src = src;} }14.6. 編寫FdRes.java實體類
package com.layui.upload;import java.io.Serializable; import java.util.List;public class FdRes implements Serializable {private static final long serialVersionUID = 1L;private int code;private String msg;private List<FdData> datas;public FdRes(int code, String msg, List<FdData> datas) {super();this.code = code;this.msg = msg;this.datas = datas;}public int getCode() {return code;}public void setCode(int code) {this.code = code;}public String getMsg() {return msg;}public void setMsg(String msg) {this.msg = msg;}public List<FdData> getDatas() {return datas;}public void setDatas(List<FdData> datas) {this.datas = datas;} }14.7. 編寫上傳文件接口
package com.layui.upload;import java.io.File; import java.io.IOException; import java.util.ArrayList; import java.util.Iterator; import java.util.List; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.apache.commons.fileupload.FileItem; import org.apache.commons.fileupload.disk.DiskFileItemFactory; import org.apache.commons.fileupload.servlet.ServletFileUpload; import com.google.gson.Gson;public class FileUpload extends HttpServlet {private static final long serialVersionUID = 1L;@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {// 創建一個磁盤文件的工廠, 然后將它傳遞到servletFileUplaod的實例中DiskFileItemFactory diskFileItemFactory = new DiskFileItemFactory();ServletFileUpload servletFileUpload = new ServletFileUpload(diskFileItemFactory);// 根據request對象獲取所有的文件集合, 這里包括input標簽輸入的值也屬于FileInputtry {List<FileItem> fileItemList = servletFileUpload.parseRequest(req);Iterator<FileItem> iterator = fileItemList.iterator();while (iterator.hasNext()) {FileItem fileItem = (FileItem) iterator.next();if (fileItem.isFormField()) { // 是否是表單提交域, 可以分區是否上傳的附件String name = fileItem.getFieldName(); // input標簽的nameString value = fileItem.getString(); // input表單的valueSystem.out.println("name = " + name + ", value= " + value);} else {String fieldName = fileItem.getFieldName(); // 表單提交過來的file input標簽中name的屬性值String fileName = fileItem.getName(); // file input上傳的文件名String contentType = fileItem.getContentType(); // 獲得上傳文件的類型long size = fileItem.getSize(); // 上傳文件的大小String filePath = getServletContext().getRealPath("/") + fileName;File saveFile = new File(filePath);fileItem.write(saveFile); // 將文件寫入磁盤中System.out.println("filePath = " + filePath + ", size= " + size + ", contentType= " + contentType + ", fieldName= " + fieldName);FdData fdData = new FdData(filePath);List<FdData> datas = new ArrayList<FdData>();datas.add(fdData);FdRes fdRes = new FdRes(1, "上傳成功", datas);Gson gson = new Gson();String json = gson.toJson(fdRes);// 響應客戶端的內容類型是text/html 編碼是UTF-8(包含字符編碼和網頁編碼)resp.setHeader("Content-Type", "text/html; charset=UTF-8");resp.getWriter().println(json);}}} catch (Exception e) {e.printStackTrace();}}protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException ,IOException {doGet(req, resp);}; }14.8. 配置web.xml
14.9. 效果圖
總結
以上是生活随笔為你收集整理的015-图片文件上传的全部內容，希望文章能夠幫你解決所遇到的問題。
