ajax-upload-image.mobile

簡介

進行移動web開發時，圖片上傳功能基本都會使用到。實現雖然說難度不大，但自己還是會遇到很多小坑。寫了一個demo（可正常使用，demo只有前端程式碼）來給大家提供一種思路。

demo預覽

如何使用？

1. demo/index.html中樣例所示，引入如下js

<script type="text/javascript" src="../lib/exif.js"></script>
<script type="text/javascript" src="../js/wrapper.js">
 
</script>
<script type="text/javascript" src="../js/upload_image.js"></script>

exif.js是一個開源的讀取影象的原始資料的功能擴充套件js，用於處理ios裝置拍照上傳存在的圖片旋轉問題

wrapper.js建立遮罩層簡單js

upload_image.js圖片展示操作依賴wrapper.js

1. 建立imageUpload

//當前已上傳圖片張數
var i = function(){
        return $("img.preview").length;
    }

new
 
 ImageUploader($(".upload-area"),{
            uploaderUrl:uploaderUrl,
            inputName:"imgs",
            beforeComplete:function(){
                $('#submitBtn').attr('disabled',true);
            },
            afterComplete: function() {
                $('#submitBtn').attr('disabled',false
 
);
                if(i() > 0){
                    $(".J_Showmeonfileuploaded").hide()
                }
                if(5 === i()){
                    $(".upload-btn").hide();
                }
            }
    });

1. 配置引數

{
    inputName: "img",//input名，用於構造表單提交資料
    onlyShow: !1, //是否只檢視
    uploadBtn: ".J_UploadBtn",//圖片上傳按鈕
    fileInput: ".J_FileInput",//圖片inputfile
    prevClass: "preview",//所有上傳成功並顯示的圖片都會新增此類（可統計當前已上傳圖片張數）
    uploaderUrl: "",//圖片上傳url地址
    deleteUrl: "",//刪除圖片url地址
    limitSize: 5, //圖片大小限制 5M
    limitNum: 5, //圖片數量限制
    beforeComplete: function() {},//圖片上傳前回調函式
    afterComplete: function() {}//圖片上傳完成回撥函式
}