<input type= "file" id= "fileelem" multiple accept= "image/*" onchange= " Handlefiles (This) ">
<div id= "fileList" style= "width:200px;height:200px;" ></div>
<script>
Window. URL = window. URL | | Window.webkiturl;
var Fileelem = document.getElementById ("Fileelem"),
FileList = document.getElementById ("FileList");
function Handlefiles (obj) {
var files = obj.files,
img = new Image ();
if (window. URL) {
File API
Alert (Files[0].name + "," + files[0].size + "bytes");
img.src = window. Url.createobjecturl (Files[0]); Create an object URL, not your local path
Img.width = 200;
Img.onload = function (e) {
Window. Url.revokeobjecturl (THIS.SRC); After the picture is loaded, release the object URL
}
Filelist.appendchild (IMG);
}else if (window. FileReader) {
Opera does not support the Createobjecturl/revokeobjecturl method. We use FileReader objects to handle
var reader = new FileReader ();
Reader.readasdataurl (Files[0]);
Reader.onload = function (e) {
Alert (Files[0].name + "," +e.total + "bytes");
IMG.SRC = This.result;
Img.width = 200;
Filelist.appendchild (IMG);
}
}else{
Ie
Obj.select ();
Obj.blur ();
var nfile = Document.selection.createRange (). text;
Document.selection.empty ();
IMG.SRC = nfile;
Img.width = 200;
Img.onload=function () {
Alert (nfile+ "," +img.filesize + "bytes");
}
Filelist.appendchild (IMG);
}
}
</script>
Upload images and browse