移動端異步上傳圖片demo：ajax-upload-image.mobile

移動端異步上傳圖片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();
                }
            }
    });

{
    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() {}//圖片上傳完成回調函數
}

項目主頁：http://www.baiduhome.net/lib/view/home/1448634059282