HHuploadify 變化無窮的圖片上傳組件

你能夠在這裏讀到我第一次發佈HHuploadify的內容，那個時候HHuploadify只是做爲一個jquery插件發佈，可是如今不一樣了我但願把它獨立出來，不依賴jquery，雖然在瀏覽器的兼容性上再也不支持IE8及如下（以前應該也不支持，沒測試過），可是由於不依賴jquery因此在可擴展性上就更進了一步。

升級的目標是讓它的使用和配置更加簡潔。以前必須按jquery的插件的方式去使用，而如今只須要實例化一個類便可。

<link rel="stylesheet" href="dist/HHuploadify.css">
<script src="dist/HHuploadify.js"></script>
<script>
let uploader = new HHuploadify({
  container: '#upload',
  url: 'http://localhost/uploadImage',
})
</script>

有沒有一種超級簡單的感受。來看看升級後的效果：

最初級的配置，選擇圖片（多選）後點擊上傳按鈕進行上傳

添加一個auto的配置，選擇圖片（多選）以後自動上傳圖片

默認狀況下，點擊選擇圖片按鈕後，打開的選擇器能夠一次性選擇多張圖片。若是是用戶頭像，那麼只能選一張圖片，只須要配置一個single選項便可。配置以後，這個實例只能上傳一張圖片。開始上傳以後，選擇按鈕就會消失。

上傳成功以後，用server端返回的url字段中的url做爲新的預覽圖片。在一些須要裁剪的狀況下可能會用到，只須要把showPreview設置爲2便可。

經過showUploadProcess的配置，採用不一樣的上傳進度展現效果。

假如你想默認就有幾張圖片，也是能夠的，使用reset方法便可。

對HHuplodify進行擴展也超級簡單，上圖演示的就是利用jquery.dragsort插件擴展HHuploadify，對上傳以後的圖片列表能夠拖拽的效果。

利用single選項，進行簡單擴展以後，就能夠實現一組固定的上傳。

經過鉤子函數，對上傳的最大張數進行控制。上面圖片演示中，最多隻能上傳4張圖片。

經過這些演示，有沒有以爲想要實現本身的上傳效果很方便呢？經過github瞭解怎麼安裝和使用吧。

若是你以爲組件還不錯，打個賞呀~