2014-11-25 3 views
0

내 Webform에서 Asp : FileUpload 컨트롤을 사용하고 있습니다. 는 FileUpload 제어의 의 OnChange() 이벤트에Javascript/Asp.net을 사용하여 업로드하기 전에 파일 높이 너비 가져 오기

, 자바 스크립트 함수가 실행

<asp:FileUpload ID="fUpload" runat="server" Style="visibility: hidden;width:1px" onchange="callme(this)"/> 

자바 스크립트 기능 :

function callme(oFile) { 
    document.getElementById('<%=txtFilePath.ClientID%>').value = oFile.value; 
    ReadImage(oFile.value); 
} 

ReadImage 기능은 파일을 읽고 높이를 말해야한다 선택한 파일의 너비와 크기 및 파일이 이미지가 아닌 경우 오류 메시지를 표시합니다.

function ReadImage(_file) 
{ 
    var reader = new FileReader(); 
    var image = new Image(); 


    image.src = 'file://' + _file;    
    image.onload = function() { 

      alert('Step 2'); 

      var w = this.width, 
       h = this.height, 
       t = file.type,       
       n = file.name, 
       s = ~ ~(_file.size/1024) + 'KB'; 


      alert('<img src="' + this.src + '"> ' + w + 'x' + h + ' ' + s + ' ' + t + ' ' + n + '<br>'); 
     }; 
     image.onerror= function() 
     { 
      alert('Invalid file type: '+ _file.type); 
     }; 

    } 

ReadImage() 함수는 선택한 파일을 읽고 서버에 업로드하기 전에 해당 파일의 높이, 너비와 크기를 얻어야한다.

어떻게 할 수 있습니까 ?? 내가 뭘 잘못하고있어.

+0

'_file'의 가치는 무엇입니까? – TryingToImprove

+0

사용자 컴퓨터의 로컬 파일 경로 ... 예 : "C : \ Users \ amit_shelke \ Pictures \ as.jpg" –

+0

'C :/fakepath/as.jpg'가 아닌가요? – TryingToImprove

답변

0
function callme(oFile) 
{ 
    document.getElementById('<%=txtFilePath.ClientID%>').value = oFile.value; 
    ReadImage(oFile); 
} 

function ReadImage(_file) { 
    var fr = new FileReader; 

    fr.onload = function() { // file is loaded 
     var img = new Image; 

     img.onload = function() { 

      alert('Step 2'); 

      var w = img.width; 
      var h = img.height; 

      alert('<img src="' + fr.result + '"> ' + w + 'x' + h + '<br>'); // is the data URL because called with readAsDataURL 
     }; 
     img.onerror = function() { 
      alert('Invalid file type'); 
     }; 

     img.src = fr.result; // is the data URL because called with readAsDataURL 

    }; 

    fr.readAsDataURL(_file.files[0]); // for using a <input type="file"> 
} 
+0

해결책이 작동하지 않았습니다. 시도해 줘서 고마워. img.onload()가 트리거하지 않았습니다. –

+0

오, 난 그냥 img.src 넣어 잊지, 지금은 내 코드를 업데이 트했습니다. – Vaibhav

-1

당신은 image.src = 'file : //'+ _file없이 시도 했습니까?

var img = new Image; 

img.onload = function() { 
    alert(img.width); 
    alert(img.height); 
}; 
img.onerror = function() { 
    alert("error"); 
}; 
img.src = oFile.value; 
+0

예, 제안한대로 이미 시도했지만 작동하지 않습니다. 실제로 경고 (img.width)는 정확한 가치를 제공해야하지만 그렇지 않습니다. 그 이유는 Filereader 클래스의 객체를 생성하고 Image 클래스에 전달하여 코드가 작동하도록 요구할 수 있습니다. 그러나 자바 스크립트에 익숙하지 않아 정확한 코드를 작성하지 않아도됩니다. –

+0

나는 다른 대답을 올렸고, callme와 ReadImage 함수를 모두 변경 했으므로 이제 작동 할 것입니다. – Vaibhav

0

내 질문의 나머지 부분은 -

사용 "를 업로드하기 전에 파일 크기를 가져옵니다"이 자바 스크립트

function checkFile(fieldObj) { 
    var FileName = fieldObj.value; 
    var FileExt = FileName.substr(FileName.lastIndexOf('.') + 1); 
    var FileSize = fieldObj.files[0].size; 
    var FileSizeMB = (FileSize/10485760).toFixed(2); 


    if ((FileExt != "png" && FileExt != "doc" && FileExt != "bmp" && FileExt != "dib" && FileExt != "JPG" && FileExt != "jpeg" && FileExt != "jpe" && FileExt != "jfif" && FileExt != "gif" && FileExt != "tiff" && FileExt != "tif" && FileExt != "tga") || FileSize > 10485760) { 
     var error = "File type : " + FileExt + "\n\n"; 
     error += "Size: " + FileSizeMB + " MB \n\n"; 
     error += "Please make sure your file is in pdf or doc format and less than 10 MB.\n\n"; 
     alert(error); 
     return false; 
    } 
    return true; 
} 
관련 문제