Preview Image without Upload to my server_问答_开发者

Preview Image without Upload to my server

开发者 https://www.devze.com 2023-02-04 02:11 出处：网络

Hello how i can preview 开发者_开发知识库Image without upload to my server in asp.net C#and when i see the image i should press upload to upload to server.In a HTML5 capable browser you can use the Fi

Hello how i can preview 开发者_开发知识库Image without upload to my server in asp.net C# and when i see the image i should press upload to upload to server.

In a HTML5 capable browser you can use the FileReader object to read a file from the users hdd as a base64 encoded string. You can use this base64 representation with css to show the preview. In older browsers you will need flash or similar plugin-based code to do it.

Here is a HTML5 example that works in all modern browsers:

<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

Yes it is possible.

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);
        }    
    }

You can get Live Demo from here.