(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; } } }