歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
您现在的位置: Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

jQuery 自制上傳頭像插件-附帶Demo實例(ajaxfileupload.js第三彈)

這篇文章主要是對前兩篇關於ajaxfileupload.js插件的文章

《ASP.NET 使用js插件出現上傳較大文件失敗的解決方法(ajaxfileupload.js第一彈》 http://www.linuxidc.com/Linux/2014-09/106413.htm

jQuery 關於ajaxfileupload.js插件的逐步解析(ajaxfileupload.js第二彈) http://www.linuxidc.com/Linux/2014-09/106413.htm

的一個收關。但是最初也是因為想做這麼一個功能,一點一點的引發出了好多問題,不斷去學習,研究,才寫了這三篇。

早些時候已經實現了上傳頭像的功能,但是代碼卻是零零散散的,有html,有jQuery還有c#,所以就決定把這個功能獨立出來,當個插件用會方便很多。而事實是在封裝成插件的過程中,也學到了很多知識。

本文Demo下載地址

------------------------------------------分割線------------------------------------------

免費下載地址在 http://linux.linuxidc.com/

用戶名與密碼都是www.linuxidc.com

具體下載目錄在 /2014年資料/9月/10日/jQuery 自制上傳頭像插件-附帶Demo實例(ajaxfileupload.js第三彈)

下載方法見 http://www.linuxidc.com/Linux/2013-07/87684.htm

------------------------------------------分割線------------------------------------------

下面給大家看一下界面:

1、初始情況下

2、點擊上傳頭像,彈出選擇,預覽浮動框

3、選擇圖片

4、確定後,符合要求,會提示成功,不符合要求,也會做出相應的提示

5、預覽

6、確定上傳

下面是部分代碼

js部分:


$.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;

        })

    })

});

 

更多詳情見請繼續閱讀下一頁的精彩內容: http://www.linuxidc.com/Linux/2014-09/106414p2.htm

Copyright © Linux教程網 All Rights Reserved