<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="file" id="fileElem" multiple accept="image/*" onchange="handleFiles(this)"> <div id="fileList" style="width:200px;height:200px;"></div> </body> <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]); //创建一个object URL，并不是你的本地路径 img.width = 200; img.onload = function(e) { window.URL.revokeObjectURL(this.src); //图片加载后，释放object URL } fileList.appendChild(img); }else if(window.FileReader){ //opera不支持createObjectURL/revokeObjectURL方法。我们用FileReader对象来处理 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> </html>
图片上传预览js功能实现
猜你喜欢
转载自blog.csdn.net/ddwddw4/article/details/80240057
今日推荐
周排行