首頁 > 網際網路

uploadify(jquery)外掛的使用及圖片上傳預覽

2019-12-12 21:58:48

由於協助新人做新手上路專案,要實現一個圖片上傳即時預覽的功能,一方面那幾天上班的時候雞毛蒜皮的事情太多,再加上用純js寫要考慮各種瀏覽器的相容性,所以沒有靜下心來研究這個外掛(uploadify)的使用,所以借用周末的時間寫了一個範例希望可以幫到有同樣問題的網友.


1

首先到外掛官網下載uploadify,然後解壓到xampp的網站根目錄下,目錄結構如下(因為PC上的瀏覽器對HTML5的支援沒有智慧手機那麼好所以建議下載Flash版本的)      網站根目錄:D:/xampp/htdocs/



2

開啟index.php看一下,官網給的範例,引入了jquery庫和一個uploadify.js和css檔案,然後最了一些初始化設定,上傳一張圖片之後看是否能成功



3

到目錄下面去檢視結果沒有剛才上載的檔案,看看uploadify.js原始碼是呼叫了uploadify.php現在只有去檢視這個js檔案看看哪裡有錯誤,看過原始碼之後應該新建目錄之後就能上傳成功試試看



4

再次上傳看看時候能夠成功,經過新建目錄達到目的,但是還是沒有達到我們的即時預覽功能,只有在去看uploadify.php和uploadify.js原始碼了




5

照著官網的例子把那個onUploadSuccess事件的使用方法複製到我們的index.php裡面去,然後測試一下看是否能夠成功,結果成功的談出了我們要的東西,有了這個那我們的問題就可以迎刃而解了



6

上面已經彈出了我們要的資訊,現在在index.php裡面加入一個div然後用jquery動態顯示圖片就,實現了我們的即時預覽功能!




IT145.com E-mail:sddin#qq.com