Question

今天我正在使用HTML5进行拖放操作。我想做点什么：

从您的计算机中抓取图像文件，
将其放入网络浏览器的input =“file”div中
然后我需要拍摄这张照片并将其显示在#livePreview div

我知道我无法从用户位置获取此文件的绝对路径 - 安全性。

我这样做：

HTML

  var livePreview = document.getElementById('livePreviewId');
    var imageInput = document.getElementById("inputFileId");
    
    imageInput.addEventListener("dragover", function( e ){
        e.preventDefault();
        e.stopPropagation();
    });
    imageInput.addEventListener("dragenter", function( e ){
       e.preventDefault();
        e.stopPropagation();
    });
    
    imageInput.addEventListener("drop", function( e ){
        if(e.dataTransfer){
            console.log(e.dataTransfer);
            if(e.dataTransfer.files.length) {
                console.log("e files length ", e.dataTransfer.files.length);
                e.preventDefault();
                e.stopPropagation();
                /*UPLOAD FILES HERE*/
                console.log("e files ", e.dataTransfer.getData("image/gif"));
                upload(e.dataTransfer.files);
            }   
        }
    });
    
    function upload(files){
        console.log(files[0]);
    }

 <div id="livePreviewId" style="border:1px solid #d3d3d3;width:150px;height:300px;"></div>
            
            <div class="pull-right">
                <p>Drop it here:</p>
                <input id="inputFileId" type="file" class="column" style="border:1px solid #d3d3d3;width:350px;height:50px;"/>  
            </div>

好的，我用JSON获取文件，下一步是什么？如何在浏览器中显示它？我怎样才能将它发送到服务器？如何存储在本地存储中？

也许一种可能的方法是将其发送到服务器（本地存储？）然后放入浏览器？但这不是实时预览吗？

任何想法如何解决这个问题？

BR

Answer 1

好的，我解决了这个问题：

<强> HTML

<img id="livePreviewId" src="" />

<div class="pull-right"> 
    <p>Or drop it here:</p>
    <input id="fileDropFieldId" type="file" class="column" style="border:1px solid #d3d3d3;width:350px;height:50px;"/>
</div>

JAVASCRIPT CODE

var dndOutput = document.getElementById('livePreviewId');
var imageInput = document.getElementById("fileDropFieldId");

imageInput.addEventListener('change', function(){
    var file = this.files[0];
    if(file.type.indexOf('image') < 0){
        console.error('invalid type');
        return;
    }
    var fReader = new FileReader();
    fReader.onload = function(){
        dndOutput.src = fReader.result;
        localStorage.setItem('imgData', getBase64Image(dndOutput));
    };
    fReader.readAsDataURL(file);
});

function getBase64Image(img){
    var canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;

    var imgCtx = canvas.getContext('2d');
    imgCtx.drawImage(img, 0,0);
    var dataUrl = canvas.toDataURL('image/png');

    return dataUrl.replace(/^data:image\/(png|jpg);base64,/, "");
}

function fetchimage(){
    var dataImage = localStorage.getItem('imgData');
    dndOutput.src = "data:image/png;base64," + dataImage;
}
fetchimage();

如何从json数据传输中读取图像

1 个答案: