DTCMS中部分IE8不支持webupload上传附件的控件,更改为ajaxfileupload

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了DTCMS中部分IE8不支持webupload上传附件的控件,更改为ajaxfileupload相关的知识,希望对你有一定的参考价值。

dialog\dialog_attach.aspx

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>上传附件</title>
<link href="../skin/default/style.css" rel="stylesheet" type="text/css" />
<script src="../../scripts/jquery/jquery-1.11.2.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" src="../js/jquery.ajaxfileupload.js"></script>

<script type="text/javascript">
    $(function () {
        //fup_pic2 上传控件ID
        $(#txtfiles).change(function () {
            upload_pro();

        });
    });

    function upload_pro() {
        $("#uploadimg").html("<img src=‘../images/ajax-loading.gif‘> 附件上传中...")
        $.ajaxFileUpload(
            {

                url: ../../tools/upload_ajax.ashx?action=AttachFile&random= + Math.random(),
                secureuri: false,
                fileElementId: txtfiles,
                dataType: json,
                success: function (data, file) {
                    if (data.status == 1) {
                        $(".upload-name").val(data.name);
                        $(".upload-path").val(data.path);
                        $(".upload-size").val(data.size);
                        $("#uploadimg").text("上传成功");
                    }
                    else {
                        parent.dialog({
                            title: 错误,
                            content: data.msg,
                            okValue: 确定,
                            ok: function () { }
                        }).showModal(api);
                        $("#uploadimg").text("");
                        return false;
                       
                    }
                },
                error: function (data, status, e) {
                    $("#uploadimg").text("错误");
                }
            });

        $(#txtfiles).change(function () {
            upload_pro();
        });
    }

</script>
<script type="text/javascript">
    var api = parent.dialog.get(window); //获取父窗体对象
    //页面加载完成执行
    $(function () {
        //设置按钮及事件
        api.button([{
            value: 确定,
            callback: function () {
                execAttachHtml();
                return false;
            },
            autofocus: true
        }, {
            value: 取消,
            callback: function () { }
        }]);
        
     
    });

    //创建附件节点
    function execAttachHtml() {
        var currDocument = $(document); //当前文档
       
            if ($("#hidFilePath").val() == "" || $("#hidFileSize").val() == "" || $("#txtFileName").val() == "") {
                parent.dialog({
                    title: 提示,
                    content: 没有找到已上传附件,请上传!,
                    okValue: 确定,
                    ok: function () { }
                }).showModal(api);
                return false;
            }
            var fileExt = $("#hidFilePath").val().substring($("#hidFilePath").val().lastIndexOf(".") + 1).toUpperCase();
            var fileSize = Math.round($("#hidFileSize").val() / 1024);
            var fileSizeStr = fileSize + "KB";
            if (fileSize >= 1024) {
                fileSizeStr = ForDight((fileSize / 1024), 1) + "MB";
            }
            
            appendAttachHtml($("#txtFileName").val(), $("#hidFilePath").val(), fileExt, fileSize, fileSizeStr); //插件节点
         
    }

    //创建附件节点的HTML
    function appendAttachHtml(fileName, filePath, fileExt, fileSize, fileSizeStr) {
       
            var liHtml = <li>
            + <input name="hid_attach_id" type="hidden" value="0" />
            + <input name="hid_attach_filename" type="hidden" value=" + fileName + " />
            + <input name="hid_attach_filepath" type="hidden" value=" + filePath + " />
            + <input name="hid_attach_filesize" type="hidden" value=" + fileSize + " />
            + <i class="icon"></i>
            + <a href="javascript:;" onclick="delAttachNode(this);" class="del" title="删除附件"></a>
            + <div class="title"> + fileName + </div>
            + <div class="info">类型:<span class="ext"> + fileExt + </span> 大小:<span class="size"> + fileSizeStr + </span> 
             
            + </li>;
            api.close(liHtml).remove();

        }
        //四舍五入函数
        function ForDight(Dight, How) {
            Dight = Math.round(Dight * Math.pow(10, How)) / Math.pow(10, How);
            return Dight;
        }
</script>

</head>

<body>
<form id="form1" runat="server">
<div class="div-content">
  <dl>
    <dt>选择文件</dt>
    <dd><asp:FileUpload ID="txtfiles" runat="server"  class="input txt"/>
         <input type="hidden" id="hidFilePath" class="upload-path" />
        <input type="hidden" id="hidFileSize" class="upload-size" />
    </dd>
  </dl>
  <div class="dl-attach-box">
    <dl>
      <dt>文件名称</dt>
      <dd>
      
     
        <input type="text" id="txtFileName" class="input txt upload-name" />
        <div class="upload-box upload-attach"></div>
      </dd>
    </dl>
    <dl>
      <dt></dt>
      <dd> <span class="tips">上传文件后,可更改附件名称</span></dd>
    </dl>
    <dl>
      <dt></dt>
      <dd><span id="uploadimg"></span></dd>
    </dl>
    <style>
    #uploadimg{color:#000;line-height:32px;font-weight:bold}
    #uploadimg img{vertical-align:middle}
    </style>
  </div>
  
</div>


</form>
</body>
</html>

tools\upload_ajax.ashx加入方法

   case "AttachFile"://附件上传文件
                    AttachFile(context);
                    break;
#region 上传附件的方法,有些IE8不支持webuploader,改用ajaxfileupload
        private void AttachFile(HttpContext context)
        {
            bool _iswater = false;//默认不水印
            HttpFileCollection files = context.Request.Files;
            if (files == null)
            {
                context.Response.Write(@"{
                status : ‘error‘,
                msg : ‘" + "请选择要上传文件" + @"‘
                }");
                context.Response.End();
                return;
            }
            if (files != null && files.Count > 0)
            {
                HttpPostedFile file = files[0];                
                    try
                    {
                        UpLoad upFiles = new UpLoad();
                        string remsg = upFiles.fileSaveAs(file, false, _iswater);
                        Dictionary<string, object> dic = JsonHelper.DataRowFromJSON(remsg);
                        string status = dic["status"].ToString();
                        string msg = dic["msg"].ToString();
                        if (status == "0")
                        {
                            context.Response.Write("{\"status\":0,\"msg\":\"" + msg + "\"}");
                            return;
                        }
                        else
                        {
                            string name = dic["name"].ToString();
                            string path = dic["path"].ToString();
                            string fileSize = dic["size"].ToString();
                            context.Response.Write("{\"status\":1,\"msg\":\"" + msg + "\",\"path\":\"" + path + "\",\"name\":\"" + name + "\",\"size\":" + fileSize + " }");
                        
                        }
                    }
                    catch (Exception ex)
                    {
                        context.Response.Write("{\"status\": 0,\"msg\":\"" + ex.Message + "\"}");
                        context.Response.End();
                    }
                
                
            }
 
        }
        #endregion

 

以上是关于DTCMS中部分IE8不支持webupload上传附件的控件,更改为ajaxfileupload的主要内容,如果未能解决你的问题,请参考以下文章

webuploader上传ie9,ie8上传多个文件时上传失败 F12报错 缺少对象

官方demo修改后的webuploader上传预览图片(兼容IE8) github下载回来的有问题

百度插件webuploader的坑!

大文件上传组件webupload插件

文件夹批量下载插件webupload插件

jsp利用webuploader实现超大文件分片上传断点续传