圖片上傳插件梳理與學習
圖片上傳梳理與學習:
項目的oper端和seller端,用了兩個不同插件,簡單了解一下:
一、seller端:
seller端使用的是 AjaxUpload.js ,封裝好的一個庫。調用時傳入參數,配置相關屬性即可。
1、使用步驟
引入JS文件;
JS代碼構建對象,傳入對應參數;同時JS中的方法可以進行圖片上傳之前之後的處理;
後臺:實現圖片上傳同時返回結果;
2、AjaxUpload的學習參考:
http://www.zhangxinxu.com/wordpress/2009/11/ajax-upload多文件上傳插件翻譯及中文演示/
教程很詳細,和自己使用的非常類似。對於一些參數、方法的解析也很詳細。可以參考。(後面的中文也是鏈接地址)
http://zhaoyanblog.com/archives/83.html
教程:簡單的講解了一下使用,以及參數的配置。不如上一篇,不過也很有參考意義,勝在簡潔。
3、代碼備份:
控件源碼:https://drive.google.com/open?id=1uXDckVgUpSNdV8iJfnpNVJwiGJ1THohm
調用控件地方:https://drive.google.com/open?id=1Zhzj7n1VBiXn3qZjbEVqqDFO4esparva
後臺代碼(包括獲取圖片寬度和高度):https://drive.google.com/open?id=1vNl04hGqNfktrxJlTbXVsBs3R9jf_O_c
二、oper端:
oper端用的是另一個插件:Plupload.js 都是插件,使用起來區別不大。
1、使用步驟:
引入plupload的源碼;
創建對象等步驟,以及初始化看Demo吧,這個沒必要重復;
其他邏輯同上一個;
2、學習參考:
https://www.cnblogs.com/2050/p/3913184.html
超級詳細的一個教程,有全部屬性的介紹,還有一個簡單的Demo,幾乎就是官方文檔的翻譯了…
http://blog.csdn.net/qq_30100043/article/details/78491993
裏面的Demo比上面的教程詳細一點,可以參考。
3、結束;
圖片上傳插件梳理與學習