asp.net js 实现动态添加文件上传

最新推荐文章于 2024-01-05 21:50:37 发布

Gentleness901

最新推荐文章于 2024-01-05 21:50:37 发布

阅读量244

点赞数

分类专栏： asp.net 文章标签： jquery js asp.net

本文链接：https://blog.csdn.net/Fierceness901/article/details/116169305

版权

asp.net 专栏收录该内容

11 篇文章 3 订阅

订阅专栏

前台

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="renderer" content="webkit|ie-comp|ie-stand" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <%--<meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />--%>
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link href="layui/css/layui.css" rel="stylesheet" />
    <link href="css/style1.css" rel="stylesheet" />
    <link href="css/ace.min.css" rel="stylesheet" />
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <link href="css/font-awesome.min.css" rel="stylesheet" />
    <script src="layui/layui.js"></script>

    <style>
        i {
            color: red;
        }


        .layui-form-item .layui-inline {
            margin-bottom: 5px;
            margin-right: 10px;
            padding-left: 18%;
        }

        .layui-form-label {
            width: 9rem;
        }

        .layui-btn {
            margin: 2rem;
        }
    </style>
    <title></title>
</head>
<body style="overflow: auto">
    <form id="form1" runat="server">
        <div class="layui-form-item" style="margin-top: 3rem;">
            <div class="layui-inline">
                <label class="layui-form-label">单号</label>
                <div class="layui-input-inline">
                    <input type="text" id="txtNumber" name="phone" lay-verify="required" runat="server" onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\a-z- ]/g,'')" onpaste="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\a-z- ]/g,'')" oncontextmenu="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\a-z- ]/g,'')" autocomplete="off" class="layui-input" />
                </div>
            </div>

        </div>
        <div class="layui-form-item" style="margin-top: 3rem;">
            <div class="layui-inline">

                <button type="button" class=" layui-btn" runat="server" onclick="addFile(this.parentNode)">添加</button>
                <button type="button" class=" layui-btn" runat="server" onserverclick="UpLoadFile_OnlyUpLoad" >保存</button>
                <div id="file"></div>
                </div>
            <div class="layui-inline">
                
                <input type="file" id="fileUpload" style="display:none" runat="server" class="layui-btn" />
                </div>
            <div class="layui-inline">
                
        </div>
            </div>
    </form>
</body>
</html>

    <script src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
    function addFile(event) {
        //创建一个div标签，用以包含一个input标签和删除按钮
        var innerdiv = document.createElement("div");

        //创建一个input标签
        var inputNode = document.createElement("input");
        inputNode.name = "fileName";
        inputNode.type = "file";
        inputNode.className = "layui-btn";
        inputNode.setAttribute("runat", "server");


        //创建一个删除按钮
        var delNode = document.createElement("input");
        delNode.name = "del";
        delNode.type = "button";
        delNode.value = "删除";
        delNode.className = "layui-btn";

        //删除当前删除按钮所在的标签,为此按钮点击事件创建一个处理函数
        delNode.onclick = function d() {
            this.parentNode.parentNode.removeChild(this.parentNode); //删除此div区域
            var fileNodes = document.getElementsByName("fileName");
        };
        //var brNode = document.createElement("/br");
        innerdiv.appendChild(inputNode);
        innerdiv.appendChild(delNode);
        //innerdiv.appendChild(brNode);

        var div = document.getElementById("file");
        div.appendChild(innerdiv);
    }

    
</script>

后台

public void UpLoadFile_OnlyUpLoad(object sender, EventArgs e)
        {
            string msg = "";
            StringBuilder sbReturn = new StringBuilder();
            if (Request.ServerVariables["HTTP_REFERER"] == null)
            {
                sbReturn.Append("{");
                sbReturn.Append("\"fileName\":\"" + "" + "\",\"iserror\":true");
                sbReturn.Append("}");
                var mmmm = sbReturn.ToString();
            }
            List<string> strFullFileUrlList = new List<string>();
            if (Request.Files != null && Request.Files.Count > 0 && Request.Files[0] != null)
            {

                for (int i = 0; i < Request.Files.Count; i++)
                {
                    if (Request.Files[i].ContentLength > 0)
                    {

                        byte[] cbyte = new byte[Request.Files[i].ContentLength];
                        Request.Files[i].InputStream.Read(cbyte, 0, cbyte.Length);

                        string FileFolderUrl = Request["FileFolderUrl"];//文件保存路径
                        string strFullFileUrl = "";
                        string strFileName = Path.GetFileName(Request.Files[i].FileName).ToLower();
                        strFileName = DateTime.Now.ToString("yyyyMMddHHmmss") + strFileName;
                        FileUpload.WS_WriteFileSoapClient wfsc = new FileUpload.WS_WriteFileSoapClient();
                        FileUpload.FileMsg strReturn = wfsc.WriteFile(cbyte, strFileName, FileFolderUrl);
                        if (strReturn.isSuccess == true)
                        {
                            strFullFileUrl = strReturn.content;
                        }
                        Request.InputStream.Close();
                        Request.InputStream.Dispose();
                        strFullFileUrlList.Add(strFullFileUrl);
                    }
                }

            }
            ICodesBll codeBll = new CodesBll();
            var mode = new Codes();
            mode.Code = txtNumber.Value;
            var res = codeBll.AddAndGetId(mode);
            if (res != null && res.Rows.Count > 0 && res.Rows[0] != null)
            {
                var codeId = res.Rows[0][0];
                if (codeId != null && !string.IsNullOrEmpty(codeId.ToString()))
                {

                    ICodePicsBll pics = new CodePicsBll();
                    if (strFullFileUrlList != null && strFullFileUrlList.Any())
                    {
                        StringBuilder sqlMake = new StringBuilder();
                        foreach (var item in strFullFileUrlList)
                        {
                            string sqlAdd = string.Format(@" INSERT INTO [dbo].[CodePics]([CodeId],[PicUrl]) VALUES({0},'{1}')", codeId, item);
                            sqlMake.Append(sqlAdd);
                        }
                        var addSql = sqlMake.ToString();
                        var result = SqlHelper.ExcuteSql(addSql);
                        //Response.Write(addSql);
                        if (result > 0)
                        {
                            Response.Write("<script>alert('添加成功！');window.location.href='CodePicsList.aspx'</script>");
                        }
                    }

                }
            }
        }

Gentleness901

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
asp.net js 实现动态添加文件上传

前台<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="renderer" content="webkit|ie-comp|ie-stand" />
复制链接

扫一扫