iT邦幫忙

0

圖片上傳後,馬上存取

  • 分享至 

  • xImage

我觀察了幾個網站,他們在做圖片上傳時,有些是當使用者選取要上傳圖片後,整個form表單都還沒有送出,但是圖片卻已經存入folder了,有些是如果有對圖片做編輯的動作,他也會馬上存入folder,想請問為何會這樣設計?
1.為甚麼不等送出表單後才儲存圖片?
2.且這些圖片就算點選刪除,後台也不會把它真的刪掉(再刪除前先複製連結)?

咖咖拉 iT邦好手 1 級 ‧ 2019-11-13 11:22:13 檢舉
一般這個都是用JS寫的
JS裡面的AJAX 再搭配PHP應用

存入folder <---PHP 應用
簡單的說是為了使用者體驗
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
1
小魚
iT邦大師 1 級 ‧ 2019-11-13 11:24:24

有的只是前端預覽圖片,
有的會同時透過Ajax儲存圖片,
就看你的需求去研究怎麼做了.

豬豬人 iT邦新手 4 級 ‧ 2019-11-13 11:58:16 檢舉

小弟不是很清楚為何在使用者刪除時,不去刪除後端的圖(我刪除前先複製了檔案路徑,刪除後任然可以找到該圖)

fillano iT邦超人 1 級 ‧ 2019-11-13 16:09:11 檢舉

看到圖片不代表有上傳,你先確認一下(打開瀏覽器的開發人員工具觀察一下網路)

0
阿展展展
iT邦好手 1 級 ‧ 2019-11-13 11:37:09

提升使用者體驗 UX
給使用者:「上傳有成功唷」 的回應

有些網頁有提供「上傳」的功能,但按了上傳卻不一定能「真的上傳成功」
這個動作能加深使用者操作的信心

另外 可能要再看更細部 舉例來說:
上傳大頭貼,就可以先看縮圖,是不是縮小後的樣子是使用者所能接受的
或是要上傳房屋的物件、賣畫的...會想看自己的商品上傳後,縮圖是否吸引消費者

不儲存就能減少多餘的流量,減少不必要的浪費,省下更多成本

豬豬人 iT邦新手 4 級 ‧ 2019-11-13 11:55:42 檢舉

製作成縮圖還是要經過php吧? 這樣也不會比較省流量阿 ,而且它們後會把你刪除的照片刪除

製成縮圖不一定要php的。

0
淺水員
iT邦大師 6 級 ‧ 2019-11-13 14:57:24

1.為甚麼不等送出表單後才儲存圖片?

如果不是 ajax ,而是直接用傳統的 form 傳送,那麼假設傳送失敗,使用者要重新操作,這給人的感覺很不好。

2.且這些圖片就算點選刪除,後台也不會把它真的刪掉(再刪除前先複製連結)?

有兩種可能,一種是伺服器沒真的刪掉,另外一種是其實伺服器刪掉了,你看到的只是瀏覽器的 cache 而已。

製作成縮圖還是要經過php吧? 這樣也不會比較省流量阿 ,而且它們後會把你刪除的照片刪除

前端是可以直接縮圖的。例如可以:「前端縮圖,後端只檢查縮圖後的資料是不是符合規定。」這樣流量就比直接傳遞原圖還小了。不過怎麼樣比較好要看客戶需求。

看更多先前的回應...收起先前的回應...
豬豬人 iT邦新手 4 級 ‧ 2019-11-13 15:15:15 檢舉

請問大大,您所謂前端縮圖只是把圖片顯示小張?還是真的把圖檔變小?

淺水員 iT邦大師 6 級 ‧ 2019-11-13 15:24:04 檢舉

可以真的變小, canvas 是最簡單的作法。

fillano iT邦超人 1 級 ‧ 2019-11-13 16:13:22 檢舉

簡單說Javascript可以透過<input type='file'>或是Drag&Drop動作取得要上傳的圖檔,然後透過Canvas可以取得圖檔內每個pixel,所以即使沒上傳,也什麼都能做。

淺水員 iT邦大師 6 級 ‧ 2019-11-13 16:41:35 檢舉

以前用 canvas 產圖檔的經驗是,相同的圖片,每個瀏覽器產生的檔案大小不大一樣(印象中chrome比firefox小)。閒暇之餘還玩過不透過 canvas ,而是自己讀寫 ArrayBuffer ,配合 deflate 相關函式庫產圖檔…。

豬豬人 iT邦新手 4 級 ‧ 2019-11-13 16:50:21 檢舉

小弟目前是將原檔傳入後端(PHP)內才做處裡,如果使用canvas 應該可以省下不少資源

fillano iT邦超人 1 級 ‧ 2019-11-13 16:56:08 檢舉

淺水員 請受小弟一拜~~

淺水員 iT邦大師 6 級 ‧ 2019-11-13 23:04:20 檢舉

fillano 前輩這樣會讓我不知所措,是那段時間太閒,剛好遇到這塊就研究一下,也只玩到png 格式,jpg 比較複雜就沒玩了。

0

我將我以前的做法大致上給你了解一下。

一般會預覽圖會區分兩種方式。

1.實際上傳:圖片在選定圖後,就直接先上傳到伺服器上。當然,上傳的位置一般會先放在類似temp的地方。有些人會不另外存檔。只是將php中tml拿到的內容用變數轉出來。不過這招一般會消耗很大的記憶體。所以大多數來說,會另存上傳的檔案到web可以讀取到的目錄放。然後再送出路徑。
2.不直接上傳:利用html5的canvas。將上傳的內容重新繪製在canvas上。但並沒做上傳的動作。

我要發表回答

立即登入回答