Question

我目前有一个有效的MVC解决方案，它可以作为一种＆＃34; IT帮助台＆＃34;，我想添加上传图像的功能（使用<input type="file"..../>轻松完成）但是作为很多人会从剪切工具中复制图像，我试图让他们将图像粘贴到表单中。这个位可以在fiddle中看到，但是如果可能的话，我无法弄清楚如何在控制器中获取这些图像。

查看

<div class="col-sm-12 col-md-12 col-lg-12">
        <label for="fileUploads" class="col-sm-3 col-md-3 col-lg-3">File(s) Upload</label>
        <div name="fileUploads" id="fileUploads" multiple contenteditable="true" style="outline: 1px solid black; overflow: auto;"></div>
</div>

JQuery的

document.getElementById("fileUploads").focus();
    document.body.addEventListener("paste", function (e) {
        for (var i = 0; i < e.clipboardData.items.length; i++) {
            if (e.clipboardData.items[i].kind == "file" && e.clipboardData.items[i].type == "image/png") {
                // get the blob
                var imageFile = e.clipboardData.items[i].getAsFile();

                // read the blob as a data URL
                var fileReader = new FileReader();
                fileReader.onloadend = function (e){
                    // create an image
                    var image = document.createElement("IMG");
                    image.src = this.result;

                    // insert the image
                    var range = window.getSelection().getRangeAt(0);
                    range.insertNode(image);
                    range.collapse(false);

                    // set the selection to after the image
                    var selection = window.getSelection();
                    selection.removeAllRanges();
                    selection.addRange(range);
                };

                // TODO: Error Handling!
                // fileReader.onerror = ...

                fileReader.readAsDataURL(imageFile);

                // prevent the default paste action
                e.preventDefault();

                // only paste 1 image at a time
                break;
            }
        }
    });

This is where the JQuery came from

此JQuery的结果在<img>中插入<div>，例如

<div><img src="...." /> </div>

Answer 1

我怀疑浏览器中的<img>元素是否包含base64编码的图片网址？

为什么不抓取src属性的内容并将其发回服务器？

代码示例让你开始（在php中）：

How to save a PNG image server-side, from a base64 data string

获取img in MVC Controller

1 个答案: