如何获得它由<input>

function changeFile() { 
 
     var preview = document.getElementById("previewDiv"); 
 
     preview.style.backgroundImage = ""; 
 

 
     var element = document.getElementById("ads_files"); 
 
     var files = element.files; 
 

 
     var file = files[0]; 
 

 
     console.log(file); 
 

 
     var reader = new FileReader(); 
 
     reader.onload = loadFinished; 
 
     reader.readAsDataURL(file); 
 

 
     function loadFinished(event) { 
 
     var data = event.target.result; 
 
     preview.style.backgroundImage = 'url(' + data + ')'; 
 
     } 
 
    }

#previewDiv { 
 
    border: 2px solid rgb(204, 204, 204); 
 
    width: 250px; 
 
    height: 200px; 
 
    background-size: 100% 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="file" id="ads_files" name="file" onchange=changeFile() /> 
 

 
<div id="previewDiv"> 
 
</div>

上面的代码是上传图片并显示为div的背景上传的图片的大小。它完美的作品。

现在我想上传适当宽度和高度的图片。所以我需要获取上传图片的大小（其他图片不会上传到服务器）。

我在互联网上搜索了一些解决方案。看起来，document.getElementById（“ads_files”）。值可能会在图像上传后得到文件的路径。然后使用Image.src = document.getElementById（“ads_files”）加载图像并使用Image函数获取大小。

但问题是，该值是一个像c：\ fakepath \ 10256530_503531203106865_63236440322903725_n.jpg（我使用Mac !!!!）的假路径。当然，这个程序不会起作用。

我敢打赌，这项工作可以在当地完成，但我不知道该怎么做。

任何好主意？

来源

2016-11-29 ZeroZerg

什么叫适当大小的意思是，你说的是图像尺寸或图像文件的大小？ – Sreekanth

file.size获取文件的大小。 –

重复的 http://stackoverflow.com/questions/7497404/get-file-size-before-uploading http://stackoverflow.com/questions/3717793/javascript-file-upload-size-validation –

这里是你如何检索图像尺寸，这些添加到您的loadFinished()功能

var image = new Image(); 
image.src = data; 
image.onload = function() { 
    console.log(image.naturalWidth, image.naturalHeight); 
}

来源

2016-11-29 04:09:44 Dummy

感谢您的回答。我已经尝试了像你的代码。问题是我无法从“输入”中获取路径或URL。 – ZeroZerg

我认为你的新代码应该可以工作。我会试试看。谢谢 – ZeroZerg

据我所知，Javascript不允许你访问上传文件的路径。您只能访问文件名，但不能访问完整路径 – Dummy

试一次

function imgSize(){ 
 
     var myImg = document.querySelector("#sky"); 
 
     var realWidth = myImg.naturalWidth; 
 
     var realHeight = myImg.naturalHeight; 
 
     alert("Original width=" + realWidth + ", " + "Original height=" + realHeight); 
 
    }

<img src="http://files.codepedia.info/uploads/2015/08/getFileName_size.jpg" id="sky" width="250" alt="Cloudy Sky" contextmenu="skymenu"> 
 
    <p><button type="button" onclick="imgSize();">Get Original Image Size</button></p>

来源

2016-11-29 04:00:27

如果我使用你的代码。我必须先上传图像，然后获取图像的url或路径，并将其设置为“img.src”。它应该有点多余，我必须将其上传到服务器并从服务器下载。我认为这可以在当地完成。如果我认为错了，请纠正我。 – ZeroZerg

可能是这可以帮助你

有趣ction changeFile（）{

var preview = document.getElementById("previewDiv"); 
preview.style.backgroundImage = ""; 

var element = document.getElementById("ads_files"); 
var files = element.files; 

var file = files[0]; 

console.log(file); 
/*Code here to show width on console*/ 
console.log($(element).width());  

var reader = new FileReader(); 
reader.onload = loadFinished; 
reader.readAsDataURL(file); 

function loadFinished(event) { 
var data = event.target.result; 
preview.style.backgroundImage = 'url(' + data + ')';   
}

}

来源

2016-11-29 05:42:53 Kanu

如何获得它由<input>

回答

相关问题