js 图片上传（iframe）

最新推荐文章于 2024-11-13 01:18:00 发布

weixin_30847271

最新推荐文章于 2024-11-13 01:18:00 发布

阅读量124

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wuMing-dj/p/3588093.html

版权

//上传图片构造函数
function FileUploader(targetId, uploadInputId, uploadFormId, picAreaId, delUrl, targetInput, fileName) {
this.targetId = targetId;
this.uploadInputId = uploadInputId;
this.uploadFormId = uploadFormId;
this.picAreaId = picAreaId;
this.delUrl = delUrl;
this.targetInput = targetInput;
this.iframeName = undefined; //当前iframe的名字
this.fileName = fileName; //当前iframe的名字

return {
upload: this.upload,
apendPic: this.apendPick
};
};


//开始上传
FileUploader.prototype.upload = function () {
    $('#' + this.targetId).click(function () {
        $('#' + this.uploadInputId).click();
    });
};

//添加图片
FileUploader.prototype.appendPic = function () {
    var fileId = this.fileName.substring(0, this.fileName.indexOf('.'));
    var picHtml = '<div id="' + fileId + 'div" style="float: left; margin-left: 5px; position: relative"><a id="' + fileId + 'del" style="height: 20px; width: 20px; position: absolute; top: -2px; right: -5px; z-index: 10;" class="panel-tool-close" /><img id="' + fileId + '" style="border: 10px solid #ddd; padding: 5px; width: 100px; height: 80px;" src="../content/FileUploaders/' + this.fileName + '" /></div>';
    $('#' + this.picAreaId).append(picHtml);

    //绑定删除事件
    $('#' + fileId + 'del').click(function () {
        this.delPic();
    });

    //绑定图片点击事件
    $('#' + fileId).click(function () {
        window.open('/picupload/picview?imgname=' + fileName);
    });

    //添加图片名到input
    $('#' + targetInput).val($('#' + targetInput).val() + ',' + fileName);
};

//删除图片
FileUploader.prototype.delPic = function () {
    $.post(this.delUrl, { imgname: this.fileName }, function (data) {
        //提示
        if (data.msg.toLowerCase() == 'true') {
            msgNotify('删除成功！');
        } else {
            msgNotify('删除失败！');
        };
        //删除div
        $('#' + fileId + 'div').remove();
        //删除input中的对应图片名
        if (data.msg.toLowerCase() == 'true') {
            var fileNames = $('#' + this.targetInput).val();
            fileNames = fileNames.replace(eval("/" + this.fileName + "/gi"), '');
            $('#' + this.targetInput).val(fileNames);
        };
    });
};

//绑定上传控件change事件
FileUploader.prototype.uploaderChange = function () {
    //设置easyui
    $('#' + this.targetId + ' span span').html('正在上传中');
    $('#' + this.targetId).unbind('click');
    //提交表单
    this.iframeName = 'uploadIframe' + Math.random();
    var iframe = $('<iframe width="0" height="0" frameborder="0" name="' + this.iframeName + '">');
    iframe.appendTo($('body'));
    $('#' + this.uploadFormId).attr('target', iframeName);
    $('#' + this.uploadFormId).submit();
};

//绑定iframe 加载完成事件
FileUploader.prototype.iframeOnload = function () {
    //设置Easyui
    $('#' + this.targetId + ' span span').html('选择打款凭证');
    $('#' + this.targetId).bind('click', function () { $('#' + this.uploadInputId).click(); });
    //读取iframe页面回传的值
    this.fileName = $(window.frames[this.iframeName].document).find("input").val();
    //添加图片
    this.appendPic();
};

转载于:https://www.cnblogs.com/wuMing-dj/p/3588093.html