純原生js移動端圖片壓縮上傳插件

前段時間，同事又來咨詢一個問題了，說手機端動不動拍照就好幾M高清大圖，上傳服務器太慢，問問我有沒有可以壓縮圖片並上傳的js插件，當然手頭上沒有，別慌，我去網上搜一搜。

結果呢，呵呵。。。誒~又全是基於jquery、zepto的（這句話似乎吐槽次數太多了...），然后我也就不吐槽了，

然后當然是自己做了，先上圖：

純原生js的移動端圖片壓縮上傳插件，不依賴任何庫

用法

在html頁面中引入input標簽，通過自定義屬性data-LUploader綁定點擊觸發的標簽id，寫法如下：

<div class="LUploader" id="demo1">
        <div class="LUploader-container">
            <input data-LUploader='demo1' data-form-file='basestr' data-upload-type='front' type="file" />
            <ul class="LUploader-list"></ul>
        </div>
        <div>
            <div class="icon icon-camera font20"></div>
            <p>單擊上傳</p>
        </div>
    </div>

 

通過將某個自定義屬性如data-form-file賦值basestr來決定上傳base64字符串參數名，其他自定義屬性賦值來決定其他post參數鍵值如data-upload-type='front'，如此一來post參數將成為如下樣子：

{
  formFile:data:image/jpeg;base64,/9j/4......,
  uploadType:front
}

 

將樣式文件引入到頁面中：

 <link rel="stylesheet" href="css/LUploader.css">

 

同時引入js文件到頁面中：

<script src="js/LUploader.js"></script>

初始化插件：

new LUploader(這里放需要綁定的input對象作為參數, {
            url: '',//post請求地址
            multiple: false,//是否一次上傳多個文件 默認false
            maxsize: 102400,//忽略壓縮操作的文件體積上限 默認100kb
            accept: 'image/*',//可上傳的圖片類型
            showsize:false//是否顯示原始文件大小 默認false
        });

項目地址：https://github.com/xfhxbb/LUploader

獨樂樂不如眾樂樂，如果伙伴們手上沒有好的手機端上傳圖片插件不如先拿我這個應付一下吧！