<%@ 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>
动态创建图片批量上传(用到了百度编辑器插件)
最新推荐文章于 2023-02-06 09:43:54 发布