关于互动图片中添加图片字段后上传处理问题？

今天我在做一个用互动上传图片的功能。

首先添加互动模型。然后添加智能组图字段

由于互动模型中没有上传这些代码，于是我从会员中心的添加内容那里把这个代码取了一出来

<ul data-id='txt_wttp' id="ul_wttp" class="preview_img_ul"></ul>
<div class="clearfix"></div>
<div><textarea id="txt_wttp" name="txt_wttp" class="form-control w-100 mb-2" style="height: 110px" value=""></textarea></div>
<div class='btn-group' style="padding-left:0px;padding-top:2px;"><input type='button' class='btn btn-outline-info' value='批量上传' onclick='UpFileDiag({"field":"images","nodeid":2,"inputid":"wttp","name":"wttp","uploaddir":"/UploadFiles/","iswater":"0"});' /><input type='button' class='btn btn-outline-info' value='远程抓取' onclick='UpFileDiag({"field":"images","nodeid":2,"inputid":"wttp","name":"wttp","uploaddir":"/UploadFiles/","iswater":"0"}, "/Plugins/WebUploader/RemoteImg.aspx");'/><input type='button' class='btn btn-outline-info' value='图片库' onclick='SelectUppic({"field":"images","nodeid":2,"inputid":"wttp","name":"wttp","uploaddir":"/UploadFiles/","iswater":"0"});'/><input type='button' class='btn btn-outline-info' value='组图排序' onclick='SortImg({"field":"images","nodeid":2,"inputid":"wttp","name":"wttp","uploaddir":"/UploadFiles/","iswater":"0"})'></div>

然后改了下ID

然后样式出来了。

然后添加JS。我比较懒，没有对JS筛选，直接把添加内容那里的JS全部复制过来。

<script src="/JS/OAKeyWord.js"></script>
<script src="/JS/DatePicker/WdatePicker.js"></script>
<script src="/JS/chinese.js"></script>
<script src="/JS/Common.js"></script>
<script src="/JS/Controls/ZL_Dialog.js"></script>
<script src="/JS/ICMS/tags.json"></script>
<script src="/JS/ZL_Content.js?v=20180530"></script>
<script src="/JS/Plugs/transtool.js"></script>
<script charset="utf-8" src="/Plugins/Ueditor/ueditor.config.js"></script>
<script charset="utf-8" src="/Plugins/Ueditor/ueditor.all.min.js"></script>

然后尝试一下功能：

提交保存

我们看一下互动的信息列表

图片路径那里在数据库保存的时候就被转码了。。

现在求个解决办法。

本人小白，劳驾大神门回复一个具体办法。

有大神说过先转再存，可是我不会，劳驾大神门回复的细致一点。

转不影响使用，你可以用html将它转成图片。

http://www.legongbang.com/Item/84.aspx

这有一个图片切成实际html展出的实例，请赏。

不会写。。

谁有个转义后储存的代码

这个应该是为了安全考虑,所以对其进行了Html编码,用于避免前端进行XSS攻击.

在使用时我们先解码再使用,可参考如下代码

<script>
    var HtmlUtil = {
        htmlEncode: function (html) {
            var temp = document.createElement("div");
            (temp.textContent != undefined) ? (temp.textContent = html) : (temp.innerText = html);
            var output = temp.innerHTML;
            temp = null;
            return output;
        },
        htmlDecode: function (text) {
            var temp = document.createElement("div");
            temp.innerHTML = text;
            var output = temp.innerText || temp.textContent;
            temp = null;
            return output;
        }
    };
    //输出解码后的字符串
    var imageStr = HtmlUtil.htmlDecode('[{&quot;url&quot;:&quot;System/field/images/20190323/201903230UoHKq.jpg&quot;,&quot;desc&quot;:&quot;&quot;}]');
    //如果要在JS中使用,可将其再转换一次为json,便于JS调用
    var imageJson=JSON.parse(imageStr);
</script>

好像不错的样子，一会我试一下