预览图像而不上传到我的服务器

Question

预览图像而不上传到我的服务器

您好我如何预览图像而无需上传到我的服务器在asp.net C#中,当我看到图像我应该按上传上传到服务器.

Answer 1

在支持HTML5的浏览器中,您可以使用FileReader对象从用户hdd读取文件作为base64编码的字符串.您可以将此base64表示与css一起使用来显示预览.在旧版浏览器中,您需要使用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>

Run Code Online (Sandbox Code Playgroud)

在这里看到它的一个小提琴

ie8不符合html5标准. (2认同)

归档时间：	14 年，9 月前
查看次数：	7049 次
最近记录：	7 年，11 月前