插入文件输入作为DOM

问题的两个部分的IMG ...插入文件输入作为DOM

基本上，在一天结束的时候，我想有一个file<input>，让用户从他们的文件系统中选择一个图片文件。然后我想在img标签的页面上将其显示出来。我需要稍后处理它，所以我知道data:不是要走下坡路，这看起来好像留下了blob:，我无法用googlefu找出它是否是X起源的。

那么blob:被认为是X起源？如果我有一个<img>的@src作为blob: URI，我可以在getImageData()上吗？

如果是这样，那么你怎么把所有这一切都拿出来？我想，如果一个人知道如何，它可能是很简单，但再一次，我的googlefu失败我...

所以：

是blob: X-来历？
如果不是，如何从file<input>的内容派生出blob: URI？

来源

2012-07-29 haxxerz

对不起，我发布了一个aswner我很少有人没有回答你的问题。那么，blob真的很重要？你想用这个图像做什么？上传？显示？ – devundef 2012-07-29 11:30:06

我相信一个文件是一个blob。尝试'URL.createObjectURL（input.files [0]）'。 – pimvdb 2012-07-29 11:31:54

http://html5demos.com/file-api/也相当不错。 – haxxerz 2012-07-30 15:08:40

使用URL.createObjectURL从File或Blob对象产生blob: -URI：

基本演示：http://jsfiddle.net/HGXDT/

<input type="file" id="file"><img id="preview"> 

window.URL = window.URL || window.webkitURL || window.mozURL; 
document.getElementById('file').onchange = function() { 
    var url = URL.createObjectURL(this.files[0]); 
    console.log(url); 
    document.getElementById('preview').src = url; 
};

代码来检查脚本是否来自同一产地遭受政策与否（回答：它不是）。（实际上，页面本身不会受到影响，因为它创造了blob: -URI，但其他网页不能画在画布上的blob: URI，并使用它）：
http://jsfiddle.net/HGXDT/1/

<input type="file" id="file"> 
<img id="preview"> 
<canvas id="canvas"></canvas> 
 
window.URL = window.URL || window.webkitURL || window.mozURL; 
document.getElementById('file').onchange = function() { 
    var url = URL.createObjectURL(this.files[0]); 
    console.log(url); 
     
    var img = document.getElementById('preview'); 
    canvasSOPTest(img, url); 
}; 
// See console. SOP error has to show up 
canvasSOPTest(new Image(), 'http://stackoverflow.com/favicon.ico?'+new Date()); 

function canvasSOPTest(img, url) { 
    // Same Origin Policy check 
    img.onload = function() { 
        var canvas = document.getElementById('canvas'); 
        var ctx = canvas.getContext('2d'); 
        console.log('Painting image...'); 
        ctx.drawImage(img, 0, 0); 
        console.log('Attempting to get image data'); 
        try { 
            ctx.getImageData(0, 0, canvas.width, canvas.height); 
            console.log('Success! No errors'); 
        } catch (e) { 
            console.log(e); 
        } 
    }; 
    img.src = url; 
}

来源

2012-07-29 11:33:13

你想要什么是使用HTML5文件Api显示图像，然后上传该图像或其他？

这是如何使用File Api来预览图像的一个很好的例子。

http://html5demos.com/file-api/

来源

2012-07-29 11:27:52 devundef

插入文件输入作为DOM

回答

相关问题