預覽圖像沒有上傳到我的服務器

你好，我可以預覽圖像，而無需上傳到我的服務器在asp.net C＃，當我看到圖像我應該按上傳上傳到服務器。預覽圖像沒有上傳到我的服務器

2011-01-12 Osama khodrog

希望這將是有益的http://codepedia.info/2015/06/html5-filereader-preview-image-show-thumbnail-image-before-uploading-on-server-in-jquery/ – 2015-08-10 10:42:35

在支持HTML5的瀏覽器中，您可以使用FileReader對象將用戶hdd中的文件讀取爲base64編碼的字符串。您可以在CSS中使用此base64表示來顯示預覽。在舊版瀏覽器中，您需要使用Flash或類似的基於插件的代碼才能完成此操作。

這裏是一個HTML5的例子，在所有現代瀏覽器的工作原理：

<html> 
<head> 
<script> 

var elmFileUpload = document.getElementById('file-upload'); 

function onFileUploadChange(e) { 
    var file = e.target.files[0]; 
    var fr = new FileReader(); 
    fr.onload = onFileReaderLoad; 
    fr.readAsDataURL(file); 
} 

function onFileReaderLoad(e) { 
    var bgStyle = "url('" +e.target.result + "')"; 

    elmFileUpload.parentElement.style.background = bgStyle; 

}; 

elmFileUpload.addEventListener('change',onFileUploadChange,false); 
</script> 
</head> 
<body> 
<input type="file" id="file-upload"/> 
</body> 
</html>

See a fiddle of it in action here

來源

2011-01-12 19:45:00

我有一個var reader = new FileReader（）中的錯誤;在IE 8 – 2011-01-12 19:55:24

是的，它是可能的。

的Html

<input type="file" accept="image/*" onchange="showMyImage(this)" /> 
<br/> 
<img id="thumbnil" style="width:20%; margin-top:10px;" src="" alt="image"/>

function showMyImage(fileInput) { 
     var files = fileInput.files; 
     for (var i = 0; i < files.length; i++) {   
      var file = files[i]; 
      var imageType = /image.*/;  
      if (!file.type.match(imageType)) { 
       continue; 
      }   
      var img=document.getElementById("thumbnil");    
      img.file = file;  
      var reader = new FileReader(); 
      reader.onload = (function(aImg) { 
       return function(e) { 
        aImg.src = e.target.result; 
       }; 
      })(img); 
      reader.readAsDataURL(file); 
     }  
    }

你可以從這裏得到Live Demo。

來源

2014-07-25 11:22:07

預覽圖像沒有上傳到我的服務器

回答

相關問題