1. 程式人生 > >前端圖片上傳思路記錄

前端圖片上傳思路記錄

chang 顯示圖片 單表 兼容 數組 請求 append dde success

需求:可一次上傳多張,多次上傳;可單張刪除;可小圖預覽;使用七牛雲存儲圖片;非必傳;提交表單表單後可重新編輯;

平臺:pc,兼容方面主要考慮谷歌瀏覽器;

思路:1.準備好頁面結構input[type]=file mutipul 和 input[type=hidden]

   2.用戶每次選取圖片後

    2.1用戶點擊input但沒有選取圖片,無論是否觸發change事件,無操作;

    2.2用戶點擊input但選取圖片和上一張相同,不觸發change事件,無操作;

    2.3用戶點擊input選取圖片並排除以上兩種情況後,準備formData空對象,獲取files並遍歷append進formData的files中(files是我們公司前後臺自定的),請求上傳七牛雲,獲取路徑;

    2.4請求成功(statas=success),提醒上傳成功,處理返回的圖片路徑字符串來顯示圖片(並每張圖附帶一個刪除標誌),將圖片路徑處理成數組放入input[type=hidden];請求失敗,提示上傳失敗,請重試;

   3.用戶點擊刪除標誌,刪除當前單張圖片,並將當前路徑從input[type=hidden]的值中剔除;

   4.點擊提交表單,請求後臺,隱藏刪除標誌;

   5.用戶重新編輯,顯示刪除標誌,重復步驟三;

   6.用戶再次提交表單。重復步驟四;

哪裏考慮不周全請指出,感謝!

前端圖片上傳思路記錄