jsで実装されるローカルプレビュー画像機能の例
3732 ワード
本明細書の例は、jsによって実現されるローカルプレビュー画像機能について述べる。皆さんに参考にしてあげます。具体的には以下の通りです。
ウェブを移動
本論文で述べたように、JavaScriptプログラムの設計に役に立ちます。
ウェブを移動
<body>
<form enctype="multipart/form-data" name="form1">
：<input id="f" type="file" name="f" onchange="change()" />
：<img id="preview" alt="" name="pic" width="300" height="150" />
</form>
<script>
function change() {
var pic = document.getElementById("preview");
var file = document.getElementById("f");
var ext=file.value.substring(file.value.lastIndexOf(".")+1).toLowerCase();//js
html5Reader(file);
}
function html5Reader(file){
var file = file.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e){
var pic = document.getElementById("preview");
pic.src=this.result;
}
}
</script>
</body>
</html>
function change() {
var pic = document.getElementById("preview");
var file = document.getElementById("f");
var ext=file.value.substring(file.value.lastIndexOf(".")+1).toLowerCase();
// gif IE
if(ext!='png'&&ext!='jpg'&&ext!='jpeg'){
alert(" ！"); return;
}
// IE
if (document.all) {
file.select();
var reallocalpath = document.selection.createRange().text;
var ie6 = /msie 6/i.test(navigator.userAgent);
// IE6 img src
if (ie6) pic.src = reallocalpath;
else {
// IE6 IE img src ，
pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src=\"" + reallocalpath + "\")";
// img src base64
pic.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';
}
}else{
html5Reader(file);
}
}
function html5Reader(file){
var file = file.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e){
var pic = document.getElementById("preview");
pic.src=this.result;
}
}
本論文で述べたように、JavaScriptプログラムの設計に役に立ちます。