动态创建图片批量上传（用到了百度编辑器插件）

最新推荐文章于 2021-12-06 07:44:30 发布

轩辕无情

最新推荐文章于 2021-12-06 07:44:30 发布

阅读量367

点赞数 2

分类专栏： C# html CSS .NET 文章标签：批量上传动态添加上传图片

本文链接：https://blog.csdn.net/glxhyh/article/details/80804767

版权

.NET 同时被 3 个专栏收录

13 篇文章 0 订阅

订阅专栏

11 篇文章 0 订阅

订阅专栏

html

6 篇文章 0 订阅

订阅专栏

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="UploadImages.aspx.cs" Inherits="Test_UploadImages" %>

<!DOCTYPE html>
<html>
<!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta name="format-detection" content="telephone=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="/css/base.css">
    <link rel="stylesheet" type="text/css" href="/css/style.css">
    <link rel="stylesheet" type="text/css" href="/css/jquery.mCustomScrollbar.css">
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/jquery.mCustomScrollbar.min.js"></script>
    <script type="text/javascript" src="/js/jquery.mousewheel.js"></script>
    <script src="/../Ueditor/ueditor.config.js" type="text/javascript"></script>
    <script src="/../Ueditor/ueditor.all.min.js" type="text/javascript"></script>
    <script src="/../Ueditor/lang/zh-cn/zh-cn.js" type="text/javascript"></script>
</head>
<body>
    <div class="cover_photo" id="divImgSrc">
        <div class="cpcon clearfix">

            <div class="photo">
                <button id="uploadpic" style="color: #FFF; font-size: 16px; line-height: 42px; text-align: center; background: #f19500; border: 0px; width: 104px;">
                    批量上传</button>

            </div>
            <div class="tion">图片尺寸：600*450</div>
            <div>
                <table>
                    <tr>
                        <td id="inputFile"></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <script id="ImgContent" type="text/plain" style="width: 875px; height: 400px; display: none;"></script>
    <script type="text/javascript">
        //批量上传图片
        var ueImg = UE.getEditor('ImgContent');
        uploadImages("uploadpic", ueImg, "companyImgSrcList");
       
        function uploadImages(id, ueImg, Vid) {
            $("#uploadpic").click(function () {
                ueImg = UE.getEditor('ImgContent');
                var myImage = ueImg.getDialog("insertimage");
                myImage.open();
                //监听图片上传
                ueImg.addListener('afterinsertimage', function (t, arg) {
                    var fileName = "inputFile";
                    var inputFileId = document.getElementById(fileName);

                    for (var i = 0; i < arg.length; i++) {
                        //var p = document.createElement("p");
                        //p.id = "index_" + i;
                        //var input = document.createElement("input");
                        //input.type = "text";
                        //input.id = "img" + i;
                        //input.style = "float: left;width: 450px;height: 40px;line-height: 40px;border: 1px solid #c9c9c9;color: #333333;font-size: 14px;outline: none;padding: 0 10px;display: block;margin-top:10px;";
                        //input.value = arg[i].src;
                        //var button = document.createElement("button");
                        //button.type = "button";
                        //button.innerHTML = "删除";
                        //button.style = "color: #FFF; font-size: 16px; line-height: 42px; text-align: center; background: #f19500; border: 0px; width: 104px;margin-top:10px;";
                        //button.onclick = function () { delFile(fileName, p.id); };
                        //p.appendChild(input);
                        //p.appendChild(button);

                        var htmlstr = "<p id=\"index_" + i + "\"><input type=\"text\" value=" + arg[i].src + " id=\"img" + i + "\" style=\"float: left; width: 450px; height: 40px; line-height: 40px; border: 1px solid rgb(201, 201, 201); color: rgb(51, 51, 51); font-size: 14px; outline: none; padding: 0px 10px; display: block; margin-top: 10px;\"><input type=\"text\" value='" + (arg[i].title == undefined ? "" : arg[i].title) + "'  style=\"float: left; width: 150px; height: 40px; line-height: 40px; border: 1px solid rgb(201, 201, 201); color: rgb(51, 51, 51); font-size: 14px; outline: none; padding: 0px 10px; display: block; margin-top: 10px; margin-left:5px;\"><button type=\"button\" style=\"color: rgb(255, 255, 255); font-size: 16px; line-height: 42px; text-align: center; background: rgb(241, 149, 0); border: 0px; width: 104px; margin-top: 10px;\" οnclick=\"delFile(this)\">删除</button></p>";
                        $("#inputFile").append(htmlstr);
                    }
                    setTimeout("destroyue()", 1000);

                });
            })
        }
        function destroyue() {
            ueImg.destroy();
            ueImg = UE.getEditor('ImgContent');
        }
        
        function delFile(obj) {
            $(obj).parent().remove();
        }
    </script>
</body>
</html>

轩辕无情

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动态创建图片批量上传（用到了百度编辑器插件）

&lt;%@ Page Language="C#" AutoEventWireup="true" CodeFile="UploadImages.aspx.cs" Inherits="Test_UploadImages" %&gt;&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;!--&lt;![endif]--&gt;&a
复制链接

扫一扫

专栏目录