wap端裡面的圖片上傳是怎麼做的，如圖

wap端裡面的圖片上傳是怎麼做的
點添加，讀取手機的圖片，確定後返回添加介面，可以繼續添加圖片
類似：

懂的朋友歡迎指導我下
備忘：我架構是yii2.0的，如果有yii的外掛程式更好好

回複內容：

wap端裡面的圖片上傳是怎麼做的
點添加，讀取手機的圖片，確定後返回添加介面，可以繼續添加圖片
類似：

懂的朋友歡迎指導我下
備忘：我架構是yii2.0的，如果有yii的外掛程式更好好

這個在下還是有點經驗的。

上傳按鈕不一致的問題

首先從上傳的按鈕說起，預設 效果醜爆了，而且不同作業系統，不同瀏覽器不一樣，關於上傳按鈕的美化網上一大堆。大體思路：

將 input 與 upload 相對於contianer 定位，將 input z-index 疊放在 .upload的上，同時將其 opcity = 0; 這樣需要什麼效果直接操作 .upload的就行。比如你放一個“圖片按鈕”、“字型表徵圖的加號”等等......

檔案 Ajax上傳

本身瀏覽器 Ajax 不支援直接上傳二進位檔案，也就是傳統方式必須使用 from表單 post 實現。但是html5 新增了檔案api，讓Ajax檔案上傳成為一件輕鬆的事情。具體實現

http://www.html5rocks.com/zh/tutorials/file/xhr2/

上面這邊文章有講到，講的非常好自己看看問題不大，或者自行百度、Google html5 Ajax 檔案上傳 File API 。

上傳到伺服器

檔案到伺服器以後假設返回 abc.png，這時候你前端 js ajxa 把圖片動態寫到頁面上。

$.ajax({    type : 'post',    url  : 'server/upload',    data : {data: 'fromData'},    success : function(data) {        // 這裡假設返回的 data = 'abc.png'        $('ul').append('
');    }})

補充：多圖片問題

如果上傳的是多圖片，對於前端來說，input多加一個multiple屬性即可

至於想限制個數，當使用者change事件完成以後判斷檔案個數可以解決。伺服器端處理完以後返回圖片資訊的json格式，例如：

["upload/1.png", "upload/2.png", "upload/3.png"]

前端將json轉為JavaScript對象，然後將其追加到頁面上即可。其實最大的問題在於html5檔案api的使用，這個掌握了就很好處理。

之前寫的，可能不完善，你可以參考參考

http://www.cnblogs.com/chenshuo/p/3895745.html

JSSDK的使用

如果是基於開發，建議採用的JSSDK實現檔案的上傳，使用者體驗非常的好，自己做的上傳除非你伺服器配置吊，頻寬土豪層級，否則自己的上傳還是有問題的。如果堅持用自己的，也可以專門來一個上傳伺服器（檔案儲存體伺服器）這樣可以在檔案上傳大量佔用頻寬時不影響其他業務。

實現：

1. 首先你的詳細的看看的JSSDK關於上傳這塊的東西，自己探索下問題不大；

2. 我主要想說的是在實際開發中，JSSDK檔案上傳預設是單一檔案上傳，尋覓好久找到了方法，可能你會用到，貼出來

圖片上傳介面多映像上傳（遞迴上傳）http://www.cnblogs.com/chenshuo/p/4838592.html

這是官方文檔：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1444738729&token=&lang=zh_CN

像是自己開發的，頁面樣式，圖片上傳都是自己寫的。

1、要麼圖片上傳到七牛等雲，得到URL做成這種頁面樣式
2、要麼調用自己的上傳圖片SDK，http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html#.E4.B8.8A.E4.BC.A0.E5.9B.BE.E7.89.87.E6.8E.A5.E5.8F.A3
3、要麼用的base64對圖片處理了下。

內就用jssdk ，普通移動web和案頭web上傳沒區別。

