一个Jquery上传文件插件

 

 

(function ($) {
    var checkAction;
    $.fn.jUploader = function (opts) {
        var opts = $.extend({}, $.fn.jUploader.defaults, opts);
        if ($('#jUploader_Frame').length == 0) {
            var frame = '<iframe id="jUploader_Frame" name="jUploader_Frame" style="display:none;"></iframe>'
            $('body').append(frame);
        }
        var Uploader = function (uploader, opts) {
            var html = [];
            var htmlTextArea = [];
            var id = uploader.id;
            var $uploader = $(uploader);
            html.push('<div id="' + id + '_Container"><form id="' + id + '_Form" method="post"  target="jUploader_Frame"  action="' + opts.action + '" enctype="multipart/form-data">');
            html.push('<input type="file" id="' + id + '_File" name="' + id + '_File" />');
            html.push('<input type="hidden" id="' + id + '_Folder" name="' + id + '_Folder" value="' + opts.uploadFolder + '" />');
            html.push('<input type="button" id="' + id + '_Submit" value="" style="display:none;" />');
            html.push('</form><div>');
            htmlTextArea.push('<div id="' + id + '_Area"><input id="' + id + '_Text" type="text" readonly="readonly" /></div>');
            $('body').append(html.join('')).append(htmlTextArea.join(''));
            var $container = $('#' + id + '_Container');
            var $form = $container.find('form');
            var $submit = $form.find('input:button');
            var $file = $form.find('input:file');
            var $textArea = $('#' + id + '_Area');
            var $text = $textArea.find('input');
            var $buttonArea = $('<div id="' + id + '_Button" class="jUploaderButtton">' + opts.buttonText + '</div>');
            var $processArea = $('<div id="' + id + '_Process" class="jUploaderProcess">Uploading...</div>');
            var top, left, height, offset, width, outHeight, outWidth, zIndex
            var offset = $uploader.offset();
            if (opts.repositionOnResize == true) {
                $(window).bind('resize.' + id, function () {
                    Reposition(id);
                });
            }
            $uploader.keydown(function (event) {
                event.preventDefault();
            });
            $file.change(function () {
                $submit.click();
            });
            $submit.click(function () {
                $buttonArea.hide();
                $processArea.show();
                ResetStatus();
                clearInterval(checkAction);
                checkAction = setInterval('CheckStatus("' + id + '");', 200);
                opts.uploadStart.call(null);
                $form.submit();
            });
            top = offset.top;
            left = offset.left;
            width = $uploader.width()
            height = $uploader.height();
            outHeight = $uploader.outerHeight();
            outWidth = $uploader.outerWidth();
            zIndex = $.ui.dialog.maxZ + 1
            $container.css({
                opacity: 0.0,
                position: 'absolute',
                top: top + 'px',
                left: left + 'px',
                width: outWidth + 82 + 'px',
                'z-index': zIndex
            });
            $file.css({
                float: 'right',
                height: outHeight + 'px'
            });
            $textArea.css({
                position: 'absolute',
                top: top + 'px',
                left: left + 'px',
                'z-index': zIndex
            });
            $text.css({
                width: width + 'px',
                height: height + 'px'
            }).attr('disabled', 'disabled').val($uploader.val());
            $buttonArea.css({
                position: 'absolute',
                height: outHeight + 'px',
                top: top + 'px',
                left: left + outWidth + 'px',
                'z-index': zIndex - 1
            });
            $processArea.css({
                position: 'absolute',
                height: outHeight + 'px',
                top: top + 'px',
                left: left + outWidth + 'px',
                'z-index': zIndex - 1
            });
            $('body').append($buttonArea).append($processArea);
            $processArea.hide();
            return $uploader;
        }
        var Reposition = function (uploaderId) {
            var $uploader = $('#' + uploaderId);
            var left, offset, outWidth;
            var offset = $uploader.offset();
            left = offset.left;
            outWidth = $uploader.outerWidth();
            $('#' + uploaderId + '_Container').css({ left: left + 'px' });
            $('#' + uploaderId + '_Area').css({ left: left + 'px' });
            $('#' + uploaderId + '_Button').css({ left: left + outWidth + 'px' });
            $('#' + uploaderId + '_Process').css({ left: left + outWidth + 'px' });
        }
        window.CheckStatus = function (uploaderId) {
            var frameContent = document.getElementById('jUploader_Frame').contentWindow;
            var $frameBody = $(frameContent.document.getElementsByTagName('body')[0]);
            var $lblStatus = $frameBody.find('#lblStatus');
            var $lblMessage = $frameBody.find('#lblMessage');
            if ($lblStatus.length > 0) {
                clearInterval(checkAction);
                $('#' + uploaderId + '_Process').hide();
                $('#' + uploaderId + '_Button').show();
                var status = $lblStatus.text();
                var message = $lblMessage.text();
                if (status == "Success") {
                    var value = $('#' + uploaderId + '_File').val();
                    $('#' + uploaderId).val(value);
                    $('#' + uploaderId + '_Text').val(value);
                } else {
                    $('#' + uploaderId + '_File').replaceWith('<input type="file" id="' + uploaderId + '_File" name="' + uploaderId + '_File" />');
                    var $file = $('#' + uploaderId + '_File');
                    $file.css({
                        float: 'right',
                        height: $('#' + uploaderId).outerHeight() + 'px'
                    });
                    $file.change(function () {
                        $('#' + uploaderId + '_Submit').click();
                    });
                }
                opts.uploadComplete.call(null, { Status: status, Message: message });
            }
        }
        var ResetStatus = function () {
            var frameContent = document.getElementById('jUploader_Frame').contentWindow;
            var $frameBody = $(frameContent.document.getElementsByTagName('body')[0]);
            $frameBody.empty();
        }
        return this.each(function () {
            return new Uploader(this, opts);
        });
    }

    $.fn.jUploader.defaults = {
        action: '../UserControls/FileUploader.ashx',
        uploadFolder: 'User',
        buttonText: 'Browse',
        repositionOnResize: false,
        uploadStart: function () { },
        uploadComplete: function (args) { }
    };
    $.fn.jUploaderDestroy = function () {
        this.each(function () {
            var id = this.id;
            $('#' + id + '_Container').remove();
            $('#' + id + '_Area').remove();
            $('#' + id + '_Button').remove();
            $('#' + id + '_Process').remove();
            $(window).unbind('resize.' + id);
        });
    }
})(jQuery);

 

.jUploaderButtton{width: 80px;background-color: #ab12ff;text-align: center;}
.jUploaderProcess{ width: 90px;text-indent: 30px;background-image: url('images/ui-anim_basic_16x16.gif');background-repeat: no-repeat;background-position: 15% 50%;}

用法如下

    <script type="text/javascript">
        $(document).ready(function () {
            $('#<%=txtImage.ClientID %>').jUploader({
                action: '../CommomUserControls/FileUploader.aspx',
                uploadFolder: 'Hotel',
                repositionOnResize:true,
                uploadComplete: function (args) {
                    if (args.Status == 'Success') {
                    // 
                    } else {
                    //
                    }
                }
            });
        });
    </script>

 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FileUploader.aspx.cs" Inherits="eComm.Maint.Web.CommomUserControls.FileUploader1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <span id="lblStatus" runat="server" visible="false"></span> 
        <span id="lblMessage" runat="server" visible="false"></span>
    </div>
    </form>
</body>
</html>

 

    public partial class FileUploader1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            string strStatus = "Failed";
            string strMessage = "Upload failed.";
            try
            {
                HttpRequest request =Request;
string imgFolder = string.Empty;
for (int i = 0; i < request.Files.Count; i++)
                {
                    HttpPostedFile postedFile = request.Files[i];
                    if (Path.GetExtension(postedFile.FileName).ToUpper() != ".JPG")
                    {
                        strMessage = "Format error,Only support JPG file.";
                        return;
                    }
                    string filePath = Path.Combine(imgFolder, Path.GetFileName(postedFile.FileName));
                    postedFile.SaveAs(filePath);
                }
                strStatus = "Success";
                strMessage = "Upload Success.";
            }
            catch (Exception ex)
            {
                strMessage = ex.Message;
            }
            finally
            {
                lblStatus.InnerText = strStatus;
                lblMessage.InnerText = strMessage;
                lblStatus.Visible = true;
                lblMessage.Visible = true;
            }
        }
    }