js 图片上传

浏览数：33 / 时间：2015年06月09日

//上传图片构造函数
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
};
};

<br>//开始上传
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();
};