异步上传文件图片

Posted 2020-09-08

// 目标页面上有东西 <input type="file" name="fileField" id="fileField" />
function ajaxUpload(opt) {

    /*
    参数说明:
    opt.ID : 页面里file控件的ID;
    opt.Format : 文件格式，以数组的形式传递，如[‘jpg‘,‘png‘,‘gif‘,‘bmp‘];
    opt.CallBack : 上传成功后回调;
    opt.Url：上传地址;
    opt.ImageSizeArry：图片压缩尺寸，如[‘200x200‘,‘100x100‘];
    opt.ProxyUrl : 上传回调代理地址
    */
    var iName = "frameName" + Math.random().toString(); //太长了，变短点
    var iframe, form, file, fileParent;

    var postUrl = opt.Url;
    if (postUrl.indexOf("?") <= -1)
    {
        postUrl += "?rd=" + Math.random();
    }

    if (opt.ImageSizeArry != null && opt.ImageSizeArry != undefined && opt.ImageSizeArry != "") {
        postUrl += "&ImageSizeArry=" + opt.ImageSizeArry;
    }

    if (opt.ProxyUrl != null && opt.ProxyUrl != undefined && opt.ProxyUrl != "") {
        postUrl += "&proxyUrl=" + encodeURIComponent(opt.ProxyUrl);
    }

    //创建iframe和form表单
    iframe = $(‘<iframe name="‘ + iName + ‘" style="display:none;"  />‘);
    form = $(‘<form method="post" target="‘ + iName + ‘" style="display:none;" action="‘ + postUrl + ‘"  name="form_‘ + iName + ‘" enctype="multipart/form-data" ></from>‘);
    file = $(‘#‘ + opt.ID); //通过ID获取flie控件
    fileParent = file.parent(); //存父级

    if (file.val()=="") {
        return;
    }

    file.appendTo(form);
    //插入body
    $(document.body).append(iframe).append(form);

    //取得所选文件的扩展名
    var fileFormat = /\.[a-zA-Z]+$/.exec(file.val())[0].substring(1);
    if (opt.Format.join(‘-‘).indexOf(fileFormat) != -1) {
        form.submit(); //格式通过验证后提交表单;

    } else {
        file.appendTo(fileParent); //将file控件放回到页面
        iframe.remove();
        form.remove();
        $.DR_Alter("文件格式错误，请重新选择！");
    };

    //文件提交完后
    iframe.load(function () {
        var data = $(iframe).contents().find(‘body‘).html();
        file.appendTo(fileParent);
        iframe.remove();
        form.remove();
        opt.CallBack(data, opt.ID);
    })


}