0

我有以下场景，用户将上传图像，然后我将该图像的 base 64 字符串作为 URL 参数传递到 fancybox src

问题是 URL 太长（错误 414），我不知道应该如何解决这个问题

这是我的代码

<a class="list-link" href="javascript:;" onclick="GenerateMapCode(this);" data-img="previewFloorImage" data-src="@Url.Content("~/js/mapeditor/index.htm")">Generate code</a>

<input accept="image/*" id="FloorImage" name="FloorImage" target="previewFloorImage" type="file" />
<img id="previewImage" width="100%" style="display:block; margin-top:15px" alt="" />

<script>
function GenerateMapCode(sender) {
var imgid = $(sender).data("img");
var imgsrc = $("#" + imgid).attr("src");
if (imgsrc === null || imgsrc === undefined) {
    alert("no image selected");
    return;
}

var url = $(sender).data("src") + "?src=" + imgsrc;
$.fancybox.open({
    padding: 0,
    src: url,
    type: 'iframe'
});

}
</script>
4

1 回答 1

0

您可以使用 FileReader API 从输入中读取文件的数据 URL，如下所示。

const floorImage = document.getElementById('FloorImage');
const previewImage = document.getElementById('previewImage');

floorImage.addEventListener('change', (e) => {
  const fr = new FileReader();
  
  fr.addEventListener('load', (frEvent) => {
    previewImage.src = frEvent.target.result;
  });
  fr.readAsDataURL(e.target.files[0]);
});

function GenerateMapCode(sender) {
var imgid = $(sender).data("img");
var imgsrc = $("#" + imgid).attr("src");
if (imgsrc === null || imgsrc === undefined) {
    alert("no image selected");
    return;
}

var url = $(sender).data("src") + "?src=" + imgsrc;
console.log(url);
/*
$.fancybox.open({
    padding: 0,
    src: url,
    type: 'iframe'
});
*/
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="list-link" href="javascript:;" onclick="GenerateMapCode(this);" data-img="previewImage" data-src="@Url.Content("~/js/mapeditor/index.htm")">Generate code</a>

<input accept="image/*" id="FloorImage" name="FloorImage" target="previewImage" type="file" />
<img id="previewImage" width="100%" style="display:block; margin-top:15px" alt="" />

于 2020-12-03T14:59:53.910 回答