1. 程式人生 > >關於web專案中的圖片上傳、並顯示問題

關於web專案中的圖片上傳、並顯示問題

一、資料庫儲存 直接把圖片的二進位制碼存到資料庫
參考blog:

直接存圖片在mysql上面有兩點好處:

  1. 比較容易做取重,就是相同的圖片只存一份.
  2. 最重要備份使用資料庫的備份方式簡單.
  3. 容易管理,去掉無用的圖片等.

缺點:

  1. 不適合超大量儲存,資料的儲存越大,恢復越麻煩
  2. 當然一般還是需要前端做更多的物理快取,而不是靠mysql來直接輸出.
還是看需求,如果圖片是小圖片,像論壇使用的,並且需要注重他的優點的可以使用,至於量沒有具體的,你要想想如果資料庫遇到問題,它的重做和遷移是否方便的問題.其實如果不是特殊情況一般存在資料庫裡都不是好的選擇.平衡他的優缺點.
二、webRoot下儲存
利用上床元件把圖片上傳到web專案下,再儲存圖片的相對路徑到資料庫表中,需生成一個新的不會重複的圖片名 缺點:顯而易見重新部署專案前需要重新把已上傳的圖片備份,待部署成功後拷貝到web專案下 三、web專案外儲存 顧名思義,把圖片上傳到web目錄外 1.建立存放圖片的目錄和web專案下一目錄之間的聯絡 例如:Linux系統下,首先把圖片上傳到專案外一目錄     然後把此目錄掛載到專案內某一目錄下   mount --bind 實際存放圖片目錄    專案內某一目錄

    然後把上傳圖片的相對路徑儲存到資料庫表中     最後在專案中直接訪問這個URL獲取圖片 注意:第一存放圖片的目錄需有上傳許可權;    第二在重新部署時,undeploy前先解除掛載  umount 實際存放圖片目錄    專案內某一目錄   待專案上傳成功後再重新建立掛載,否則在undeploy時可能丟失已上傳的圖片 缺點:每次部署前後要進行掛載,解掛載操作,易誤操作丟失資源 2.配置虛擬路徑 例如使用tomcat時: 首先把圖片上傳到專案外一目錄下
然後在tomcat中配置一個虛擬路徑指向上傳目錄命名為  "/fileUpload"  (在/conf/server.xml下配置 Context即可) 然後把上傳圖片的相對路徑儲存到資料庫表中

再在程式中通過訪問這個虛擬路徑 "/fileUpload" + 資料庫中儲存的相對URL 來獲取檔案資源 (其實相當於在tomcat下重新啟動了一個web專案,然後通過訪問此web專案下的圖片資源, 這樣其實也可以通過 http://ip:port/webProject/ resourse)

相關推薦

關於web專案圖片顯示問題

一、資料庫儲存 直接把圖片的二進位制碼存到資料庫 參考blog: 直接存圖片在mysql上面有兩點好處: 比較容易做取重,就是相同的圖片只存一份.最重要備份使用資料庫的備份方式簡單.容易管理,去掉無用的圖片等. 缺點: 不適合超大量儲存,資料的儲存越大,恢復越麻煩當然

web專案到tomcat的圖片被刪除的原因

將圖片上傳的tomcat伺服器目錄下後,其儲存在webapps下, 當在開發工具中重啟tomcat時 專案會重新部署,而圖片不屬於專案內容,就會被清空 解決辦法: 1、將圖片上傳至非webapps子目

微信端調取相冊和攝像頭,實現圖片到本地服務器

配置 epic 替換 pan source 工具 alert 調試 family 在微信公眾號網頁開發時,遇到了圖片上傳的問題,查看了微信的開發者文檔,裏面的資料比較全。接著我們看一下整個的流程 1、config權限配置 $.ajax({ url:‘wx_getC

如何解決markdown圖片的問題

github上 雲筆記 github ogl markdown weibo hub gif 解決 1.第一種方式(圖床) 1.1 google中的插件-新浪微博圖床 2.第二種方式,操作流程如下 2.1 下載一個有道雲筆記客戶端 2.2 然後把圖片通過有道雲筆記分享出來

小程式圖片

前端小程式:wxml <!--huitianxia/view/attend/attend/attend.wxml--> <import src="/huitianxia/view/common/foot.wxml"/> <view class='wrappe

圖片拖拽排序

solid mat click log 插件 sync 引用 min fin    最近的項目中遇到這樣一個需求,要求在上傳圖片時可多圖片上傳,並且可以拖拽排序。前面多圖片上傳比較好實現,網上一大片的教程、插件可供學習使用,可又要求可以拖拽排序,我也沒找到現有的代碼,自己也

iframe+form完成圖片圖片預覽功能,期間遇到圖片無法預覽解決django

django做圖片上傳時很奇怪預覽的時候怎麼都載入不到圖片,發現圖片載入路徑含有原來url,所以在圖片路徑src 最前面加了個“/"解決OK,但是原因還是不清楚,哪位大神解答下,謝謝了。按道理obj.filepath已經包含完整路徑了,,搞不明白啊 myimg.src="/"+obj.filep

web 專案a標籤值(中文)到後臺的亂碼問題

      當點選下一頁出現亂碼問題: 因為title向Servlet傳輸的是中文,所以點選下一頁會出現亂碼問題解決方法: JSP:  <script type="text/javascript">    var href=$("#redirect

利用HTML5檔案顯示在前端預覽,以圖片為例

由於專案中有上傳檔案的功能,所以這次單獨拿出來研究研究,我上網查了查,以前都是用iframe,但是自從HTML5出世之後,就可以利用H5的一些特性來上傳檔案了,啥也不說了,我上程式碼了 <!DOCTYPE html> <html lang

tp5圖片介面

1:移動端頁面:2:表單:重點圖片的uploadFile()事件<div id="approve_NI">    <div class="approve_NI_top">        <div class="approve_NI_top2"&g

springmvc圖片jquery 圖片預覽

寬為限 緊用功 功夫到 滯塞通 簡介 專案需求,需要做圖片上傳功能,圖片上傳肯定得給個預覽嘛,然後就找了下面這個方案 ajaxfileupload外掛上傳 ajaxfileupload.js網上傳了好幾個版本,選擇自己可以使用的就好了。這個外掛是N多

AndroidFTP下載(含進度)

package com.ftp; import java.io.File; import java.io.IOException; import java.util.LinkedList; import com.ftp.FTP.DeleteFileProgressListener; import com.

web專案之檔案

分析 1.上傳條件(3個): 1.1 表單的請求方式必須是 post 1.2 表單提交的型別 enctype=”multipart/form-data” 1.3 上傳控制元件 file型別 必須得寫name屬性: <input ty

小程式單張圖片 和 九宮格圖片預覽刪除示例

1、九宮格圖片 (一次性多張)上傳預覽刪除 2、單張圖片(單詞)上傳:(以下全部複製即可檢視效果) 示例圖: Wxml: <view class="gallery"> <view class='tipTit

java ssh視訊顯示縮圖以及視訊在網頁的播放

非原創,整合網上的各個步驟及自己的實施 一.上傳視訊 使用以下htm標籤即可 <form name="uploadForm" method="post" enctype="multipart/form-data" action="xxx" <td><input

web專案要求瀏覽器大檔案

專案要求瀏覽器上傳大檔案5G左右,專案採用ssh開發。 上網尋找各種解決方案,但是難度均比較大,基本上就是外掛開發。 偶然之間試了一下發現struts其實不用那麼麻煩直接上傳,將struts.xml中的上傳檔案大小限制放大一點, 我要上傳5G的檔案但是放大到10G還是不好使

SSM整合富文字編輯器editormd常用Api圖片回顯

前言: 幾天前,集成了百度的ueditor,感覺不符合現代前端的審美邏輯,並且肥胖,pass了,偶然發現editormd,覺得美滋滋,一路踩坑下來,特此記錄 editormd:支援 AMD / CMD 模組化載入(支援 Require.js & Se

關於如何去除fckeditor圖片對話方塊的連結和高階兩個選項(轉帖)

 今天老闆要求修改一個網站後臺的編輯器,原因是原來的編輯老出問題,不好用。於是我就找了個現在很流行的fckedior來作為後臺的編輯器。    在做的過程中我碰到一個配置問題,上google上google搞了很久才成功。這個配置就是把圖片上傳對話方塊中的瀏覽器伺服器中的檔案功

Simditor 富文本編輯器多選圖片視頻連接插入

storage html5 縮進 鍵-值對 png chrom simple java release simditor 是一個基於瀏覽器的所見即所得的文本編輯器。Simditor 富文本編輯器, 支持多選圖片上傳, 視頻連接插入, HTML代碼編輯以及常用富文本按鈕,支持

[ASP.NET]web實現用FTP下載檔案(附原始碼)

index.aspx 頁:<%@ Page Language="C#" AutoEventWireup="true" CodeFile="index.aspx.cs" Inherits="index" %> <!DOCTYPE html> <