摘要:框架的一個上傳到服務器然后顯示在頁面上的小實例,用的是簡單的表單形式,數據包括圖片的地址保存在數據庫中,圖片上傳到服務器下的項目文件夾里,然后頁面展示圖片算是好好把上傳功能給過了一遍了,當然還有什么上傳,分片上傳等等這里就不提了,適用于初學
SSH框架的一個上傳到服務器然后顯示在頁面上的小實例,用的是簡單的form表單形式,數據包括圖片的url地址保存在數據庫中,圖片上傳到tomcat服務器下的項目文件夾里,然后頁面展示圖片, 算是好好把上傳功能給過了一遍了,當然還有什么H5上傳,分片上傳等等這里就不提了,適用于初學上傳文件的例子。
使用Bootstrap fileinput.js上傳控件,
GitHub源碼下載:https://github.com/kartik-v/b...
頁面上需要引入的CSS和JS
效果還是不錯的
頁面代碼(參考)
uploadAction(MyEclipse的web-info下創建uploadFile文件夾)
這里沒有用smartupload或者是別的上傳jar包
package com.Action; import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; import java.io.OutputStream; import java.util.List; import org.apache.struts2.ServletActionContext; import Enity.cms_images; import Enity.cms_state; import SQL_Implements.images_sql_Implem; import com.opensymphony.xwork2.ActionSupport; @SuppressWarnings("serial") public class uploadAction extends ActionSupport { /** * 這里集合形式輸入到流,防止上傳重復文件,減少服務器壓力 */ private String img_title;// 圖片標題 private int img_state;// 狀態 // 上傳文件存放路徑 private final static String uploadAddres = "/uploadFile"; // 上傳文件集合泛型為file對象 private Listfile; // 上傳文件名集合 private List fileFileName; // 上傳文件內容類型集合 private List fileContentType; cms_images images = new cms_images(); cms_state state = new cms_state();// 實例狀態類 private images_sql_Implem isi; cms_imagesAction cia; public cms_imagesAction getCia() { return cia; } public void setCia(cms_imagesAction cia) { this.cia = cia; } public int getImg_state() { return img_state; } public void setImg_state(int img_state) { this.img_state = img_state; } public cms_state getState() { return state; } public void setState(cms_state state) { this.state = state; } public images_sql_Implem getIsi() { return isi; } public void setIsi(images_sql_Implem isi) { this.isi = isi; } public static String getUploadaddres() { return uploadAddres; } public cms_images getImages() { return images; } public void setImages(cms_images images) { this.images = images; } public String getImg_title() { return img_title; } public void setImg_title(String img_title) { this.img_title = img_title; } public List getFile() { return file; } public void setFile(List file) { this.file = file; } public List getFileFileName() { return fileFileName; } public void setFileFileName(List fileFileName) { this.fileFileName = fileFileName; } public List getFileContentType() { return fileContentType; } public void setFileContentType(List fileContentType) { this.fileContentType = fileContentType; } // 上傳方法 public String execute() throws Exception { // 打印文件名稱 System.out.println("文件名稱:" + this.getFileFileName()); for (int i = 0; i < file.size(); i++) { // 循環上傳每個文件 uploadFile(i); } /** * 這里有bug 想每次添加完后能在查詢一遍下拉框的值 */ // cia.execute(); return "uploadSuccess"; } // 調用執行上傳功能 @SuppressWarnings("deprecation") public void uploadFile(int i) throws FileNotFoundException, IOException { try { InputStream in = new FileInputStream(file.get(i)); // ServletActionContext對象響應獲取實際文件地址,getRealPath已經廢棄不推薦用了 String dir = ServletActionContext.getRequest().getRealPath( uploadAddres); System.out.println("服務器路徑:" + dir); // 獲取文件名稱 String fileName = this.getFileFileName().get(i); // 路徑和文件名丟進file對象里 File uploadFile = new File(dir, fileName); // 輸出流 OutputStream out = new FileOutputStream(uploadFile); // 設置文件大小1MB byte[] buffer = new byte[1024 * 1024]; int length; // 用循環從流中讀取文件的大小 while ((length = in.read(buffer)) > 0) { out.write(buffer, 0, length); } // 設置圖片標題和全路徑 images.setImg_title(img_title); String imgURL = dir + "/" + fileName; // 將全路徑截取為相對路徑 String strURL = imgURL.substring(32); images.setImg_url(strURL); // 設置狀態的id,并將id對象傳入 state.setS_id(img_state); images.setImg_state(state); // 添加圖片的信息 int num = isi.addIMG(images); System.out.println("是否上傳了信息:" + num); // 關閉輸入流輸出流,釋放內存 in.close(); out.close(); } catch (Exception e) { e.printStackTrace(); } } }
演示效果圖
圖片上傳到了tomcat下的項目指定的文件夾里了
頁面展示(這個部分就各有各有寫法了)
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/70379.html
摘要:把文件上傳路徑指定到然后用當前日期和文件名命名上傳過來的文件。后端利用建立服務器,利用中間件指定文件路徑。利用這個前端和后端技術,我們基本上就可以做出一個圖片上傳存儲的基本網站核心。 前幾天看了騰訊云社區的一個文件上傳的文章文件上傳那些事兒,大體上講了以下h5中圖片上傳的幾個核心原理,但是沒有后端接受的服務器代碼,沒法做測試。也沒有具體的一個實例都是一些基本的原理片段,并且ui界面也不...
閱讀 1110·2021-09-22 15:37
閱讀 1135·2021-09-13 10:27
閱讀 2473·2021-08-25 09:38
閱讀 2449·2019-08-26 11:42
閱讀 1532·2019-08-26 11:39
閱讀 1559·2019-08-26 10:58
閱讀 2325·2019-08-26 10:56
閱讀 2573·2019-08-23 18:08