zoukankan      html  css  js  c++  java
  • AjaxFileUploader 上传插件 兼容性好

    AjaxFileUploader上传插件 兼容性好 Ie Chrome Firefox
    html:

    <!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>
        <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
        <script src="js/ajaxfileupload.js" type="text/javascript"></script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <input id="fileToUpload" type="file" size="45" name="fileToUpload" class="input" />
            <button id="buttonUpload" onclick="return ajaxFileUpload();">
                上传</button>
            <img id="loading" src="/images/loading.gif" style="display: none;" />
            <div id="imgshow" style="display: none;">
            </div>
        </div>
        </form>
        <script type="text/javascript">
            function ajaxFileUpload() {
                $("#loading")
        .ajaxStart(function () {
            $(this).show();
        })
        .ajaxComplete(function () {
            $(this).hide();
        });
    
                $.ajaxFileUpload(
            {
                url: '/ajax/AjaxFileUploader.ashx',
                secureuri: false,
                fileElementId: 'fileToUpload',
                dataType: 'json',
                data: { name: 'logan', id: 'id' },
                success: function (data, status) {
                    if (typeof (data.error) !== 'undefined') {
                        if (data.error !== '') {
                            alert(data.error);
                        } else {
                            // alert(data.msg);
                            $('#imgshow').show();
                            $('#imgshow').append("<img src='/Temp/" + data.msg + "'  width='100' height='60' />");
                        }
                    }
                },
                error: function (data, status, e) {
                    alert(e);
                }
            }
        )
    
                return false;
    
            }
        </script>
    </body>
    </html>
    
     
     

    服务端:

    using System.Web;
    using System.IO;
    namespace AjaxFileUploader.ajax
    {
        /// <summary>
        /// AjaxFileUploader 的摘要说明
        /// </summary>
        public class AjaxFileUploader : IHttpHandler
        {
    
            public void ProcessRequest(HttpContext context)
            {
                if (context.Request.Files.Count > 0)
                {
                    string path = context.Server.MapPath("~/Temp");
                    if (!Directory.Exists(path))
                        Directory.CreateDirectory(path);
    
                    var file = context.Request.Files[0];
    
                    string fileName;
    
                    if (HttpContext.Current.Request.Browser.Browser.ToUpper() == "IE")
                    {
                        string[] files = file.FileName.Split(new char[] { '\\' });
                        fileName = files[files.Length - 1];
                    }
                    else
                    {
                        fileName = file.FileName;
                    }
    
    
    
                    string msg = "";
                    string strFileName = fileName;
                    if (string.IsNullOrEmpty(strFileName))
                    {
                        msg = "{";
                        msg += string.Format("error:'{0}',\n", "请选择文件!");
                        msg += string.Format("msg:'{0}'\n", string.Empty);
                        msg += "}";
                    }
                    else
                    {
                        fileName = Path.Combine(path, fileName);
                        file.SaveAs(fileName);
    
                        msg = "{";
                        msg += string.Format("error:'{0}',\n", string.Empty);
                        msg += string.Format("msg:'{0}'\n", strFileName);
                        msg += "}";
                    }
                    context.Response.Write(msg);
    
    
                }
            }
    
            public bool IsReusable
            {
                get
                {
                    return true;
                }
            }
        }
    }
    

    插件:

    //ajaxfileupload.js
    jQuery.extend({
        createUploadIframe: function (id, uri) {
            //创建 frame
            var frameId = 'jUploadFrame' + id;
            var iframeHtml = '<iframe id="' + frameId + '" name="' + frameId + '" style="position:absolute; top:-9999px; left:-9999px"';
            if (window.ActiveXObject) {
                if (typeof uri == 'boolean') {
                    iframeHtml += ' src="' + 'javascript:false' + '"';
                }
                else if (typeof uri == 'string') {
                    iframeHtml += ' src="' + uri + '"';
                }
            }
            iframeHtml += ' />';
            jQuery(iframeHtml).appendTo(document.body);
            return jQuery('#' + frameId).get(0);
        },
        createUploadForm: function (id, fileElementId, data) {
            //创建 frame    
            var formId = 'jUploadForm' + id;
            var fileId = 'jUploadFile' + id;
            var form = jQuery('<form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');
            if (data) {
                for (var i in data) {
                    jQuery('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form);
                }
            }
            var oldElement = jQuery('#' + fileElementId);
            var newElement = jQuery(oldElement).clone();
            jQuery(oldElement).attr('id', fileId);
            jQuery(oldElement).before(newElement);
            jQuery(oldElement).appendTo(form);
    
            //设置属性
            jQuery(form).css('position', 'absolute');
            jQuery(form).css('top', '-1200px');
            jQuery(form).css('left', '-1200px');
            jQuery(form).appendTo('body');
            return form;
        },
    
        ajaxFileUpload: function (s) {
            s = jQuery.extend({}, jQuery.ajaxSettings, s);
            var id = new Date().getTime()
            var form = jQuery.createUploadForm(id, s.fileElementId, (typeof (s.data) == 'undefined' ? false : s.data));
            var io = jQuery.createUploadIframe(id, s.secureuri);
            var frameId = 'jUploadFrame' + id;
            var formId = 'jUploadForm' + id;
            // 监控请求
            if (s.global && !jQuery.active++) {
                jQuery.event.trigger("ajaxStart");
            }
            var requestDone = false;
            // 创建请求对象
            var xml = {}
            if (s.global)
                jQuery.event.trigger("ajaxSend", [xml, s]);
            //等待一个响应返回
            var uploadCallback = function (isTimeout) {
                var io = document.getElementById(frameId);
                try {
                    if (io.contentWindow) {
                        xml.responseText = io.contentWindow.document.body ? io.contentWindow.document.body.innerHTML : null;
                        xml.responseXML = io.contentWindow.document.XMLDocument ? io.contentWindow.document.XMLDocument : io.contentWindow.document;
    
                    } else if (io.contentDocument) {
                        xml.responseText = io.contentDocument.document.body ? io.contentDocument.document.body.innerHTML : null;
                        xml.responseXML = io.contentDocument.document.XMLDocument ? io.contentDocument.document.XMLDocument : io.contentDocument.document;
                    }
                } catch (e) {
                    jQuery.handleError(s, xml, null, e);
                }
                if (xml || isTimeout == "timeout") {
                    requestDone = true;
                    var status;
                    try {
                        status = isTimeout != "timeout" ? "success" : "error";
                        //请求成功
                        if (status != "error") {
                            // 处理数据
                            var data = jQuery.uploadHttpData(xml, s.dataType);
                            if (s.success)
                                s.success(data, status);
                            // 触发全局返回
                            if (s.global)
                                jQuery.event.trigger("ajaxSuccess", [xml, s]);
                        } else
                            jQuery.handleError(s, xml, status);
                    } catch (e) {
                        status = "error";
                        jQuery.handleError(s, xml, status, e);
                    }
    
                    // 请求完成
                    if (s.global)
                        jQuery.event.trigger("ajaxComplete", [xml, s]);
    
                    // 处理全局AJAX计数器
                    if (s.global && ! --jQuery.active)
                        jQuery.event.trigger("ajaxStop");
    
                    // 处理结果
                    if (s.complete)
                        s.complete(xml, status);
    
                    jQuery(io).unbind()
    
                    setTimeout(function () {
                        try {
                            jQuery(io).remove();
                            jQuery(form).remove();
    
                        } catch (e) {
                            jQuery.handleError(s, xml, null, e);
                        }
    
                    }, 100)
    
                    xml = null
    
                }
            }
            // 超时检查
            if (s.timeout > 0) {
                setTimeout(function () {
                    if (!requestDone) uploadCallback("timeout");
                }, s.timeout);
            }
            try {
    
                var form = jQuery('#' + formId);
                jQuery(form).attr('action', s.url);
                jQuery(form).attr('method', 'POST');
                jQuery(form).attr('target', frameId);
                if (form.encoding) {
                    jQuery(form).attr('encoding', 'multipart/form-data');
                }
                else {
                    jQuery(form).attr('enctype', 'multipart/form-data');
                }
                jQuery(form).submit();
    
            } catch (e) {
                jQuery.handleError(s, xml, null, e);
            }
    
            jQuery('#' + frameId).load(uploadCallback);
            return { abort: function () { } };
    
        },
    
        uploadHttpData: function (r, type) {
            var data = !type;
            data = type == "xml" || data ? r.responseXML : r.responseText;
            if (type == "script")
                jQuery.globalEval(data);
            if (type == "json")
                eval("data = " + data);
            if (type == "html")
                jQuery("<div>").html(data).evalScripts();
            return data;
        }
    })
    
  • 相关阅读:
    loj2042 「CQOI2016」不同的最小割
    loj2035 「SDOI2016」征途
    luogu2120 [ZJOI2007]仓库建设
    luogu3195 [HNOI2008]玩具装箱TOY
    51nod 1069 Nim游戏 + BZOJ 1022: [SHOI2008]小约翰的游戏John(Nim游戏和Anti-Nim游戏)
    HDU 5723 Abandoned country(最小生成树+边两边点数)
    BZOJ 1497: [NOI2006]最大获利(最大权闭合图)
    51nod 1615 跳跃的杰克
    SPOJ 839 Optimal Marks(最小割的应用)
    UVa 11107 生命的形式(不小于k个字符串中的最长子串)
  • 原文地址:https://www.cnblogs.com/rhinemetal/p/2569529.html
Copyright © 2011-2022 走看看