jquery实现的ajax多图上传（移动端）

用thinkphp实现上传的过程中碰到个很诡异的问题，一次传6张图片死活都不成功，折腾N久未果之后改为一次传一张，但是用户体验太差，连续点6次是个人都得烦，而且无法保证用户会乖乖的把六张图都传完。 后来了解到jquery可以轻松地实现ajax上传，于是有了如下代码，仅供菜鸟参考

上传：

function upload(inputObj, su, er){
        var fd = new FormData();
        fd.append(inputObj.attr('name'), inputObj.get(0).files[0]);
        $.ajax({
            url: "{:U('Index/ajaxUpload')}",
            type: "POST",
            dataType: 'json',
            processData: false,
            contentType: false,
            data: fd,
            beforeSend: function(){
                _wx._loading(inputObj.attr("data-filedes") + "上传中...");
            },
            error: function(XMLHttpRequest, textStatus){
                _wx._loading();
                AjaxError(XMLHttpRequest, textStatus);
            },
            success: function(data, textStatus) {
                _wx._loading();
                if(!data.status){
                    _wx._toast(data.info, er(data));
                    return false;
                }
                su(data);
            }
        });
    }

表单提交：

checkSubmit = function(){
        if(uploadList.length == 0){
            _wx._ok("图片上传完成，保存资料中...",function(){
                $("#myupload-form").submit();
            });
            return true;
        }
        var fileKey = uploadList.shift(); //删除并返回第一个元素
        if(formObj.find("div.myupload-files[data-filekey='" + fileKey + "']").length < 1){
            _wx._toast("未找到上传对象" + fileKey, function(){
                uploadList.unshift(fileKey);
            });
            return false;
        }
        var divObj = $("div.myupload-files[data-filekey='" + fileKey + "']", formObj);
        //获取对象
        var inputObj = divObj.find("input[type='file']");
        var tips = divObj.find("label[for='upload']").text();
        var infoObj = divObj.find('p.help-block');
        //检查是否选择了文件
        if(!inputObj.get(0) || ! inputObj.get(0).files[0]){
            _wx._toast("请选择" + tips, function(){
                uploadList.unshift(fileKey);
            });
            return false;
        }
        //上传
        upload(inputObj, function(data){
            inputObj.after('<input type="hidden" name="files_' + inputObj.attr('name') + '" value="' + data.data.id + '"/>');
            infoObj.append('<br/><img src="' + data.data.thumb + '" alt="' + tips + '"/>');
            inputObj.remove();
            return checkSubmit();
        }, function(data){
            uploadList.unshift(fileKey); //上传失败
            return false;
        });
        return false;
    };

界面：

说明： _wx是我以前做微信时写的一个东东，代码如下：

var _wx = {
    _client: function () {
        return {
            w: document.documentElement.scrollWidth
            , h: document.documentElement.scrollHeight
            , bw: document.documentElement.clientWidth
            , bh: document.documentElement.clientHeight
        };
    },
    _scroll: function () {
        return { x: document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft, y: document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop };
    },
    _cover: function (show) {
        _wx._exist("cover");
        if (show) {
            $("#cover").show();
            $("#cover").css("width", (this._client().bw > this._client().w ? this._client().bw : this._client().w) + "px");
            $("#cover").css("height", (this._client().bh > this._client().h ? this._client().bh : this._client().h) + "px");
        } else {
            $("#cover").hide();
        }
    },
    _idcover: function (id, show) {
        if (show) {
            $("#" + id).show();
            $("#" + id).css("width", (this._client().bw > this._client().w ? this._client().bw : this._client().w) + "px");
            $("#" + id).css("height", (this._client().bh > this._client().h ? this._client().bh : this._client().h) + "px");
        } else {
            $("#" + id).hide();
        }
    },
    _exist: function (id, child) {
        if ($("#" + id).length == 0) {
            var objHtml = "<div id=\"" + id + "\" style=\"display:none;\">";
            if (child) {
                objHtml += child;
            }
            objHtml += "</div>";
            $("body").append(objHtml);
        }
    },
    _loading: function (text) {
        if ($("#loading").length == 0) {
            $("body").append("<div id=\"loading\" style=\"display:none\"><img src=\"/myupload/Public/images/loading.gif\" alt=\"loading\"><div id=\"loading_text\"></div></div>");
        }

        if (text) {
            this._cover(true);
            $("#loading").show();
            $("#loading_text").html(text);
            document.getElementById("loading").center();
            $(window).resize(function () {
                _wx._cover(true);
                document.getElementById("loading").center();
            });
        } else {
            this._cover(false);
            $("#loading").hide();
            $(window).unbind('resize');
        }
    },
    _toast: function (text, fun) {
        this._exist("toast");
        $("#toast").show();
        $("#toast").html(text);
        document.getElementById("toast").center();
        setTimeout(function () {
            $("#toast").hide();
            if (fun) { (fun)(); }
        }, 3 * 1000);
    },
    _ok: function (text, fun) {
        if ($("#ok").length == 0) {
            $("body").append("<div id=\"ok\" style=\"display:none\"><img src=\"/myupload/Public/images/ok.png\" alt=\"ok\"/><div id=\"ok_text\"></div></div>");
        }

        $("#ok").show();
        $("#ok_text").html(text);
        document.getElementById("ok").center();
        $(window).resize(function () {
            document.getElementById("ok").center();
        });
        setTimeout(function () {
            $(window).unbind('resize');
            $("#ok").hide();
            if (fun) { (fun)(); }
        }, 2 * 1000);
    },
    _showDlg: function (id, show) {
        if (!$("#" + id).hasClass("box")) {
            $("#" + id).addClass("box");
        }
        if (show) {
            _wx._cover(true);
            $("#" + id).show();
            document.getElementById(id).center();
            $(window).resize(function () {
                //_wx._cover(true);
                document.getElementById(id).center();
            });
            $("#cover").click(function () {
                _wx._showDlg(id);
            });
        } else {
            _wx._cover();
            $("#" + id).hide();
            $("#cover").unbind("click");
            $(window).unbind("resize");
        }
    },
    _confirm: function (title, funName) {
        if (title) {
            var objDiv = "<div class=\"box\" id=\"_wx_confirm\">";
            objDiv += "<div>" + title + "</div>";
            objDiv += "<div>";
            objDiv += "    <div class=\"left\">";
            objDiv += "        <button class=\"button1\" onclick=\"" + funName + "()\">";
            objDiv += "          确定</button></div>";
            objDiv += "    <div class=\"right\">";
            objDiv += "        <button class=\"button2\" onclick=\"_wx._showDlg('_wx_confirm')\">";
            objDiv += "          取消</button></div>";
            objDiv += "   <div class=\"clear\">";
            objDiv += "   </div>";
            objDiv += "</div>";
            objDiv += "</div>";
            $("body").append(objDiv);
            _wx._showDlg("_wx_confirm", true);
        } else if ($("#_wx_confirm").length > 0) {
            _wx._showDlg("_wx_confirm");
        }
    },
    _guide: function (show) {
        _wx._exist("guide", "<div><img src=\"/myupload/Public/images/guide.png\" alt=\"指南\" /></div><div id=\"guide_button\"></div><div id=\"guide_button2\"><button class=\"button2\" onclick=\"_wx._guideHide()\">取消</button></div>");
        this._cover(true);
        $("#guide").show();
        $(window).resize(
            function () {
                _wx._cover(true);
            });
        if (show) {
            $("#cover").onclick = _wx._guideHide;
            $("#guide_button").hide(); $("#guide_button2").show();
        } else {
            $("#guide_button").show(); $("#guide_button2").hide();
        }
    },
    _guideHide: function () {
        _wx._cover();
        $("#guide").hide();
        $("#cover").onclick = null;
        window.onresize = null;
    },
    _zero: function (n) {
        return n < 0 ? 0 : n;
    }
};