js 图片上传

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<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();
};

  

js 图片上传,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。