如何獲得它由<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>

回答

相關問題