中文前端UI框架Kit(七)無插件異步文件上傳組件,帶進度,支持文件拖拽


號外:kitjs官方討論QQ群建立了,QQ群號88093625,歡迎大家加入,討論前端相關話題,對於前端技術感興趣的朋友都可以加,里面也有來自騰訊,淘寶,豆瓣,Baidu,微軟的小牛們和大家一起討論,氛圍和諧,男女皆宜!

demo地址: http://xueduany.github.com/KitJs/KitJs/index.html#upload,感謝群友`Mr.Joy提供php Demo空間

kitjs的異步上傳插件修改自著名的ajax Upload(http://github.com/valums/file-uploader),在基礎上修復了部分bug,同時加入了一個圖片上傳預覽插件。

效果圖如下:

image

image

image

(一)使用方法

image

指定一塊區域為上傳控件,使用new $kit.ui.Upload.ImageUploader初始化,綁定后端api接口,以及相關事件

(二)初始化參數

圖片上傳預覽組件

jsdoc地址:http://xueduany.github.com/jsdoc/out/$kit.ui.Upload.ImageUploader.html

image

文件上傳組件

jsdoc地址:http://xueduany.github.com/jsdoc/out/$kit.ui.Upload.FileUploader.html

image

 

 

 

 

 

 

 

(三)后端文件

php修改版本的后端文件見:https://github.com/xueduany/KitJs/blob/master/KitJs/demo/Upload/up.php

(四)小結

下一篇將給大家分析代碼,了解一下異步上傳文件的原理是什么。敬請期待

隨便宣傳下KitJs官方QQ群88093625,對於前端技術感興趣的朋友都可以加,里面也有來自騰訊,淘寶,豆瓣,Baidu,微軟的小牛們和大家一起討論,氛圍和諧,男女皆宜!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM