开发者社区> 余二五> 正文

jQuery 自制上传头像插件-附带Demo实例(ajaxfileupload.js第三弹)

简介:
+关注继续查看

这篇文章主要是对前两篇关于ajaxfileupload.js插件的文章

ASP.NET 使用js插件出现上传较大文件失败的解决方法(ajaxfileupload.js第一弹

jQuery 关于ajaxfileupload.js插件的逐步解析(ajaxfileupload.js第二弹)

的一个收关。但是最初也是因为想做这么一个功能,一点一点的引发出了好多问题,不断去学习,研究,才写了这三篇。

早些时候已经实现了上传头像的功能,但是代码却是零零散散的,有html,有jQuery还有c#,所以就决定把这个功能独立出来,当个插件用会方便很多。而事实是在封装成插件的过程中,也学到了很多知识。

下面给大家看一下界面:

1、初始情况下

wKioL1QPqAWjwLmCAAFKoBuNgKs619.jpg

2、点击上传头像,弹出选择,预览浮动框

wKiom1QPqA7g4NfwAAGbvTRIVAQ305.jpg

3、选择图片

wKioL1QPqDOSDOAOAANIt3_6m64414.jpg

4、确定后,符合要求,会提示成功,不符合要求,也会做出相应的提示

wKioL1QPqFfA84n9AAH1a3wzRdI173.jpg

5、预览

wKioL1QPqGujorJ_AAH9eM8WkqY726.jpg

6、确定上传

wKioL1QPqH7wwSOpAAF4NCP95MA463.jpg

下面是部分代码

js部分:

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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
$.fn.extend({
 
    ShowTheFloatDiv: function (obj) {
        $(this).click(function () {
            $("body").find("*").not("div.float-outer").attr("disabled""disabled");
            var $float = jQuery.CreateTheFloatDiv();
            $img_outer_obj = obj;
        });
    }
 
});
 
$.extend({
    CreateTheFloatDiv: function () {
        if ($(".float-outer").size() == 1) {
            return $(".float-outer");
        }
        var left_offset = ($(window).width() - 600) / 2;//显示在浏览器窗口比较正的位置,看着比较舒服
        var top_offset = ($(window).height() - 278) / 3;
        var theFloatDivHtml = "<div class='float-outer' style='left:" + left_offset + "px;top:" + top_offset + "px;'>";
        theFloatDivHtml += "<div class='float-header float-border'>上传头像</div>";
        theFloatDivHtml += "<div class='float-content'>";
        theFloatDivHtml += "<div class='content-first-row'>文件名:";
        theFloatDivHtml += "<input type='text' id='tb_filename' style=';' readonly /> ";
        theFloatDivHtml += "<input type='button' id='btn_selectfile' value='选择图片' style='margin-left:-10px;' />";
        theFloatDivHtml += "<input type='file' id='btn_upload' name='btn_upload' style='display:none;' accept='.jpg,.bmp,.gif' />";
        theFloatDivHtml += "</div>";
        theFloatDivHtml += "<div class='content-second-row'>";
        theFloatDivHtml += "<span class='img-portrait' style=';'>图片预览:";
        theFloatDivHtml += "<div class='img-portrait' style='padding-top:30px;'>";
        theFloatDivHtml += "<img src='' class='preview60' alt=''/>";
        theFloatDivHtml += "<span>60*60";
        theFloatDivHtml += "</div>";
        theFloatDivHtml += "<div style='float:left;'>";
        theFloatDivHtml += "<img src='' class='preview120' alt=''/>";
        theFloatDivHtml += "<span>120*120";
        theFloatDivHtml += "</div>";
        theFloatDivHtml += "</div>";
        theFloatDivHtml += "</div>";
        theFloatDivHtml += "<div class='float-footer float-border'>";
        theFloatDivHtml += "<input type='submit' value='确定' id='btn_ok' />";
        theFloatDivHtml += "<input type='button' value='取消' id='btn_cancel' />";
        theFloatDivHtml += "</div>";
        theFloatDivHtml += "</div>";
 
        $("body").append(theFloatDivHtml);return $(".float-outer");
    }
});
 
var $img_outer_obj;
 
$(function () {
    //取消事件
    $("body").delegate("#btn_cancel""click"function () {
        $(".float-outer").remove();
        $("body").find("*").removeAttr("disabled");
    });
     
    //选择图片事件
    $("body").delegate("#btn_selectfile""click"function () {
        $("#btn_upload").trigger(e);
    });
     
    var e = jQuery.Event("click");
 
    $("body").delegate("#btn_upload""click"function () {
 
    }).delegate("#btn_upload""change"function () {
        var curPATH = getFilePath($(this).get(0));
        var fileName = curPATH.substring(curPATH.lastIndexOf("\\") + 1);
        var type = curPATH.substring(curPATH.lastIndexOf('.') + 1).toLowerCase();
        if (type == "jpg" || type == "gif" || type == "bmp") {
            $("input#tb_filename").val(fileName);
            if ($("input#tb_filename").val() == "") {
                alert("请先上传文件!");
                return;
            }
            $.ajaxFileUpload
            (
                {
                    url: '/UploadPortrait.aspx'//用于文件上传的服务器端请求地址,需要根据实际情况进行修改
                    secureuri: false//一般设置为false
                    fileElementId: $("input#btn_upload").attr("id"), //文件上传空间的id属性  <input type="file" id="file" name="file" />          //$("form").serialize(),表单序列化。指吧所有元素的ID,NAME 等全部发过去
                    dataType: 'json'//返回值类型 一般设置为json
                    complete: function () {//只要完成即执行,最后执行
                    },
                    success: function (data, status)  //服务器成功响应处理函数
                    {
                        if (typeof (data.error) != 'undefined') {
                            if (data.error != '') {
                                if (data.error == "1001") {
                                }
                                else if (data.error == "1002") {
                                    $("input#tb_filename").val("");
                                    $(".preview60").attr("src""");
                                    $(".preview120").attr("src""");
                                }
                                alert(data.msg);
                                return;
                            else {
                                alert(data.msg);
                            }
                        }
                        $(".preview60").attr("src", data.imgurl);
                        $(".preview120").attr("src", data.imgurl);
 
                    },
                    error: function (data, status, e)//服务器响应失败处理函数
                    {
                        alert(e);
                    }
                }
            )
            return false;
        }
        else {
            alert("请选择正确的图片格式(.jpg|.gif|.bmp)");
        }
    });
 
 
    $("body").delegate("#btn_ok""click"function () {
        $img_outer_obj.attr("src", $(".preview120").attr("src"));
        $(".float-outer").remove();
        $("body").find("*").removeAttr("disabled");
    });
 
    //移动浮动框
    var offset_left, offset_top, moveFlag;
    $("body").delegate(".float-header""mousedown"function (e) {
        moveFlag = true;
        offset_left = e.pageX - $(this).offset().left;
        offset_top = e.pageY - $(this).offset().top;
        $("body").delegate(".float-header""mousemove"function (e) {
            if (moveFlag) {
                $(".float-outer").css("left", e.pageX - offset_left + "px").css("top", e.pageY - offset_top + "px");
            }
        }).delegate(".float-header""mouseup"function () {
            moveFlag = false;
        })
    })
});

C#部分:

因为上传文件用到了ajax,需要先将图片上传到本地,这里也算是一个比较纠结的事情吧,因为如果想预览,除非用一些插件,否则使用的方法都得是先上传,再预览这样。这种来者都要不拒的事,看起来比较流氓哈~~

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
        HttpFileCollection files = System.Web.HttpContext.Current.Request.Files;
        string msg = string.Empty;
        string error = string.Empty;
        string imgurl = string.Empty;
        protected void Page_Load(object sender, EventArgs e)
        {
            if (files.Count > 0)
            {
                 if (System.IO.File.Exists(Server.MapPath("/UploadImages/") + files[0].FileName))
                {
                    msg = "图片已存在";
                    error = "1001";
                    string res1 = "{ error:'" + error + "', msg:'" + msg + "',imgurl:'" + imgurl + "'}";
                    Response.Write(res1);
                    Response.End();return;
                }
                if (files[0].ContentLength > 4 * 1024 * 1024)
                {
                    msg = "图片大小不能超过4M";
                    error = "1002";
                    string res1 = "{ error:'" + error + "', msg:'" + msg + "',imgurl:'" + imgurl + "'}";
                    Response.Write(res1);
                    Response.End();return;
                }
                try
                {
                    files[0].SaveAs(Server.MapPath("/UploadImages/") + System.IO.Path.GetFileName(files[0].FileName));
                }
                catch (System.IO.DirectoryNotFoundException)
                {
                }
                msg = " 上传成功! 图片大小为:" + files[0].ContentLength + "K";
                imgurl = "/UploadImages/" + files[0].FileName;
                string res = "{ error:'" + error + "', msg:'" + msg + "',imgurl:'" + imgurl + "'}";
                Response.Write(res);
                Response.End();
            }
        }

如何调用此插件

1
2
3
4
5
6
    <script type="text/javascript">
        $(function () {
            $("#btn_portrait").ShowTheFloatDiv($("#img_portrait"));
        })
         
    </script>

注意事项

必须在“上传头像”按钮所在页面引入以下几个文件

UploadPortrait.css

ajaxfileupload.js

jquery-2.0.3.min.js(jQuery插件要求在1.4.2版本之上)

UploadPortrait.js

如果大家在使用过程中出现问题,可以先把前面相关的两篇文章略读一下,大概就能找到原因了。

大致这个功能就是如上这样,感兴趣的朋友可以从下面的地址下载Demo运行看看。此外想说的是,因为是头像嘛,一定要存数据库的,但是在Demo里我并没有写,这个东西就是看大家想怎么实现了,要是我的话,因为之前预览都要将图片存到本地,所以如果存数据库的话,当然是会存图片的url了,那这样就比较好办了。

总的来说,要比想像中的快些完成了这个插件,功能倒是达到了自己的预期,但是界面来说,还有很长的一段路要走。第一次写jQuery插件,很多东西都不太专业,希望大牛们能多多给予指正和帮助。

Demo下载地址:http://down.51cto.com/data/1871944


关于上传的Demo补充内容:

上传的demo有两个问题需要说明一下,希望下载的朋友能够注意到,并流畅运行。

1、因为demo是ASP.NET项目,所以大家如想正常运行,需要在本地新建一个web项目,把我上传的uploadportrait.csproj这个文件添加进去。下次我会直接打包一个完整的web项目再上传,这次没做好希望大家给予谅解。另,我开发的时候Visual Studio版本为2010,这个望大家注意一下。

2、在调用插件的代码部分,demo里写的是

1
2
3
4
5
6
    <script type="text/javascript">
        $(function () {
            $("#btn_portrait").ShowTheFloatDiv($(img_portrait));
        })
         
    </script>

应该把$(img_portrait)改成$("#img_portrait"),这个也是自己的失误,下回会注意。










本文转自 我不会抽烟 51CTO博客,原文链接:http://blog.51cto.com/zhouhongyu1989/1550401,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Element-UI快速入门
Element-UI快速入门Element-UI快速入门
7 0
实时计算大数据处理的基石-Google Dataflow
简要回顾一下,上一篇我们介绍了Streaming,批量与流式计算,正确性与推理时间的工具,数据处理模式,事件事件与处理时间,窗口化。 在这篇文章中,我想进一步关注上次的数据处理模式,但更详细。 这里会用到一些Google Cloud Dataflow[1]的代码片段,这是谷歌的一个框架,类似于Spark Streaming或Storm。
6 0
理解工厂模式的三种形式
主要内容有: 该模式的介绍,包括: 引子、意图(大白话解释) 类图、时序图(理论规范) 该模式的代码示例:熟悉该模式的代码长什么样子 该模式的优缺点:模式不是万金油,不可以滥用模式 该模式的实际使用案例:了解它在哪些重要的源码中被使用
3 0
nuxt安装与IP端口配置nuxt安装与IP端口配置
一、Nuxt安装与运行 二、IP端口冲突与解决 三、使用终端查看某个端口号对应的进程和杀死进程 四、端口/IP端口配置
13 0
综合项目: 前端:Keepalived 双机热备,节点:LAMP+Discuz 论坛,后端:MHA
综合项目: 前端:Keepalived 双机热备,节点:LAMP+Discuz 论坛,后端:MHA
11 0
【微信小程序开发小白零基础入门】微信小程序数据API【建议收藏】
文章目录 【微信小程序开发小白零基础入门】微信小程序数据API【建议收藏】一、 本地缓存二、 数据存储1. 异步数据存储2. 同步数据存储三、 数据获取1. 异步数据获取2. 同步数据获取四、 存储信息获取1. 异步数据获取2. 同步数据获取五、 数据删除1. 异步数据删除2. 同步数据删除六、 数据清空1. 异步数据清空2. 同步数据清空七、 推荐小程序(欢迎各位大佬指导)一、 本地缓存为了提高使用便捷性,同一个小程序允许每个用户单独存储10MB以内的数据在本地设备中,这些数据称为小程序的本地缓存。开发者可以通过数据缓存API对本地缓存进行设置、获取和清个小程序允许每个用户单独存储10MB以
6 0
飞天计划体验有感
通过这几次的云计算实验,我觉得这个活动对我们大学生来说是非常有力的,而且通过阿里云的这个活动,我了解到了一些关于阿里云服务器的运用和很多知识。 通过使用云服务器做实验,我了解到了一些前端人员需要掌握的指示。而最让我感兴趣的是和云盘相关的内容,云盘的使用,可以使我们存储的空间更大、更安全,可以设密码,这就更提高了云盘的保密性,还是随时可卸载的,它的属性也可改。
8 0
+关注
20381
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载