1. 程式人生 > >圖片上傳插件梳理與學習

圖片上傳插件梳理與學習

sta 區別 實現圖 結果 display pen one borde zha

圖片上傳梳理與學習:

項目的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、結束;

圖片上傳插件梳理與學習