七牛javascript图片上传！

七牛图片上传

七牛图片上传在前端做操作时需要注意的流程：

• 首先需要调用本地图片库获取到图片
• 然后调用后台API，传给后台图片文件名称获取到七牛的dowloadUrl下载头部地址和uploadToken
• 调用七牛的upload方法，将图片上传到七牛服务器，返回来图片的正式下载地址

话不多说，直接贴代码看：

var IMG_LENGTH = 1;//图片最大1MB
var IMG_MAXCOUNT = 8;//最多选中图片张数
var IMG_AJAXPATH = "http://up.qiniu.com";//异步传输服务端位置


var UP_IMGCOUNT = 0;//上传图片张数记录
//打开文件选择对话框
$("#div_imgfile").click(function () {
   
    if ($(".lookimg").length >= IMG_MAXCOUNT) {
        alert("一次最多上传" + IMG_MAXCOUNT + "张图片");
        return;
    }

    var _CRE_FILE = document.createElement("input");
    if ($(".imgfile").length <= $(".lookimg").length) {
  //个数不足则新创建对象
        _CRE_FILE.setAttribute("type", "file");
        _CRE_FILE.setAttribute("class", "imgfile");
        _CRE_FILE.setAttribute("accept", ".png,.jpg,.jpeg");
        _CRE_FILE.setAttribute("num", UP_IMGCOUNT);//记录此对象对应的编号
        $("#div_imgfile").after(_CRE_FILE);
    }
    else { //否则获取最后未使用对象
        _CRE_FILE = $(".imgfile").eq(0).get(0);

    }

    return $(_CRE_FILE).click();//打开对象选择框
});


//创建预览图，在动态创建的file元素onchange事件中处理
// $(".imgfile").on("change", function () {
   
$(document).on("change",".imgfile",function () {
       
    if ($(this).val().length > 0) {
  //判断是否有选中图片

        //判断图片格式是否正确
        var FORMAT = $(this).val().substr($(this).val().length - 3, 3);
        if (FORMAT != "png" && FORMAT != "jpg" && FORMAT != "peg" && FORMAT != "PNG" && FORMAT != "JPG" && FORMAT != "PEG") {
            alert("文件格式不正确！！！");
            return;
        }
         //判断图片是否过大ÿ