移動端web無重新整理上傳圖檔【相容安卓IOS】

需求

手機端網頁或者微信無重新整理上傳頭像

環境

手機浏覽器或者微信浏覽器(支援HTML5)

實作方式

LocalResizeIMG

位址

說明

原版隻能指定固定的圖檔寬度，而修改版擴充原圖檔上傳

使用方式

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

<code>&lt;</code><code>h1</code> <code>class</code><code>=</code><code>"text-center"</code><code>&gt;LocalResizeIMG-本地壓縮 1.0&lt;/</code><code>h1</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>hr</code><code>/&gt;</code>

<code>    </code><code>&lt;</code><code>input</code> <code>type</code><code>=</code><code>"file"</code> <code>/&gt;</code>

<code>    </code><code>&lt;!-- javascript</code>

<code>        </code><code>================================================== --&gt;</code>

<code>    </code><code>&lt;</code><code>script</code> <code>src</code><code>=</code><code>"http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js"</code> <code>type</code><code>=</code><code>"text/javascript"</code><code>&gt;&lt;/</code><code>script</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>script</code> <code>src</code><code>=</code><code>"localResizeIMG.js"</code> <code>type</code><code>=</code><code>"text/javascript"</code><code>&gt;&lt;/</code><code>script</code><code>&gt;</code>

<code>    </code> 

<code>    </code><code>&lt;!-- mobileBUGFix.js 相容修複移動裝置 --&gt;</code>

<code>    </code><code>&lt;</code><code>script</code> <code>src</code><code>=</code><code>"patch/mobileBUGFix.mini.js"</code> <code>type</code><code>=</code><code>"text/javascript"</code><code>&gt;&lt;/</code><code>script</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code><code>&gt;</code>

<code>        </code><code>$('input:file').localResizeIMG({</code>

<code>             </code><code>width: 100,</code>

<code>             </code><code>quality: 0.1,</code>

<code>             </code><code>success: function (result) {</code>

<code>             </code><code>var img = new Image();</code>

<code>             </code><code>img.src = result.base64;</code>

<code>             </code><code>$('body').append(img);</code>

<code>             </code><code>console.log(result);</code>

<code>             </code><code>}</code>

<code>         </code><code>});</code>

<code>    </code><code>&lt;/</code><code>script</code><code>&gt;</code>

簡單說明:width是生成的圖檔的寬度，個人修改裡，如果指定width為1，則為原圖寬度

         quality是圖檔的品質

         success:生成成功以後是base64碼，在success裡可以用ajax發送到伺服器端儲存，base64會生成兩種：一種是帶字首說明圖檔類型的base64碼，可以直接放到img标簽裡使用，調用方法：result.base64   還有一種是result.clearBase64，不帶說明的，讀取方法:result.clearBase64。

伺服器端代碼:

<code>$path</code><code>=</code><code>'./Uploads/'</code><code>.</code><code>date</code><code>(</code><code>'Ymd'</code><code>).</code><code>'/'</code><code>;</code>

<code>        </code><code>if</code><code>(!</code><code>file_exists</code><code>(</code><code>$path</code><code>)){</code>

<code>            </code><code>mkdir</code><code>(</code><code>$path</code><code>);</code>

<code>        </code><code>}</code>

<code>        </code><code>$file</code><code>=</code><code>$path</code><code>.time().</code><code>'.jpeg'</code><code>;</code>

<code>        </code><code>$base64</code><code>=</code><code>base64_decode</code><code>(</code><code>$_POST</code><code>[</code><code>'head'</code><code>]);</code>

<code>        </code><code>file_put_contents</code><code>(</code><code>$file</code><code>, </code><code>$base64</code><code>)</code>

     其他說明：安卓下有些可以調用相冊，檔案管理器和攝像頭，有些隻能調用相冊和檔案管理器

               IOS可調用相冊和攝像頭。

               PC端無限制

               無論上傳什麼圖檔，最後都會變成jpeg的格式。

本文轉自 3147972 51CTO部落格，原文連結：http://blog.51cto.com/a3147972/1551066，如需轉載請自行聯系原作者