ajaxfileupload.js

一般平常用的文件上传都是input自带的，代码如下：
<input type="file" name="file">
我的项目代码大概是这样的：

<form id="card-form" class="form-horizontal card-box" action="" method="post">      <div class="form-group">          <label class="control-label col-md-2"><span class="red-xing-rs"></span>品牌名称：</label>          <div class="col-md-6">              <input type="text" class="form-control valid" maxlength="9" data-change="0" name="card.title" value ="JLZ" placeholder="商家品牌名称" tip-idx="">          </div>      </div>      。。。      //这里省略一千句代码      //包含上传会员卡背景代码      。。。      <div class="row text-center" style=" margin-top: 22px; ">          <button class="ladda-button btn btn-primary waves-effect waves-light" data-style="expand-left" type="button" id="saveBtn" data="0" >              发放会员卡          </button>      </div>  </form>

用ajax提交表单，代码如下：

$('#saveBtn').click(function(){    var formData = $("#card-form").serialize();    $.post("/admin/card", formData, function(data) {        hideLoadAlert();        if (data.code == 0) {            swal({                title : "保存成功",                text : "",                type : "success"            }, function() {                window.location.reload();            });        } else {            swal("创建失败", data.message, "error");        }        saveBtn.ladda('stop');    }, "json").error(function() {        hideLoadAlert();    });});

后台专门写了一个上传图片的方法，返回图片地址，POST过去的数据要是这样的：

------WebKitFormBoundaryUxBDlFVU60vpc8lJContent-Disposition: form-data; name="file"; filename="user_index_bg_c.jpg"Content-Type: image/jpeg------WebKitFormBoundaryUxBDlFVU60vpc8lJ--

我用了dropzone.js，可以的，官网的上传demo效果用到项目里也可以。
后来又找到了ajaxfileupload.js，小众化的一个开源js，但比dropzone.js更合适我这个项目，前端样式可以写得很自由，代码也很简洁，于是整了这个js，放弃了dropzone.js。

会员卡背景的代码：

<div class="form-group">    <label class="control-label col-md-2">会员卡背景：</label>    <input type="hidden" id="bgImg" name="card.bgImg" value="" tip-idx="" >    <div class="col-md-6">        <input type="file" name="file" accept="image/jpg,image/jpeg,image/png" id="coverfile" style="display:none" tip-idx="" class="valid">        <div id="bgUpload" class="ant-upload ant-upload-select ant-upload-select-picture-card upload-v-img">            <span class="rc-upload" tabindex="0" role="button" id="coverbutton">                <i class="anticon anticon-plus" style="line-height: 2;">+</i>                <div class="ant-upload-text" style="line-height: 25px;">上传背景</div>            </span>        </div>        <div class="ant-upload-list-item-info v-img-box card_p_img" style="display: none;">            <img src="" class="v-img card_p_img">            <i class="icon-close anticon-delete voucherImgIcon" data-ref="v-img-file" style=" left: 44%; "></i>        </div>        <p class="tipsInfo" >非必填项，建议尺寸1080px*675px，选择与卡内容相关的图片，仅支持JPG、JPEG、PNG图片文件，且文件小于2M</p>    </div></div>

js部分：

//上传背景图片    $("#bgUpload").click(function() {        $("#coverfile").click();    });    //会员卡背景图片    $("#coverfile").change(function() {        var r = ajaxFileUpload("coverfile", function(data) {            if (data) {            //上传成功之后的一些DOM操作                $(".uscard").hide();                $(".cardimg").show();                $(".card_p_img").show();                $(".upload-v-img").hide();                $("#bgImg").val("http://ebike.oss-cn-shanghai.aliyuncs.com/" + data);                $(".cardimg .imgwarp img").attr('src', "http://ebike.oss-cn-shanghai.aliyuncs.com/" + data);                $(".card_p_img").attr("src", "http://ebike.oss-cn-shanghai.aliyuncs.com/" + data);            } else {                layer.msg('图片上传失败');            }        });    });function ajaxFileUpload(fileid,afterfun) {        $.ajaxFileUpload        (            {                url: '/admin/ossUpload',//用于文件上传的服务器端请求地址                secureuri: false,       //是否启用安全提交，默认为false。                 fileElementId: fileid,  //需要上传的文件域的ID，即<input type="file">的ID。                dataType: 'text',       //服务器返回的数据类型。可以为xml,script,json,html。如果不填写，jQuery会自动判断。                success: function (data)                {                    layer.closeAll('loading');                    afterfun != null ? afterfun(data) : "";                },                error: function ()                {                    layer.closeAll('loading');                }            }        )        return false;    }

文案参考：http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html