使用FileReader对象,web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容,可以使用File对象或者Blob对象来指定所要处理的文件或数据.其中File对象可以是来自用户在一个<input type="text" />元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后的返回结果.
页面中多个，上传多个图片DEMO代码
<!Doctype html> <html> <head> <title>上传图片显示预览图</title> <style> #result img{ height:100px; display:inline-block; margin-right:10px; margin-bottom:10px; } </style> </head> <body> <div> <p> <label>请选择一个图像文件：</label> <input type="file" /> </p> <div> <a href="javascript:void(0);">添加图片</a> </div> </div> <div> <p> <label>请选择一个图像文件：</label> <input type="file" /> </p> <div> <a href="javascript:void(0);">添加图片</a> </div> </div> <script src="https://www.jb51.net/jquery-2.2.1.min.js"></script> <script> $(".add_img_btn").unbind("click").on("click",function(){ $(this).parents(".add_imgs").find("input[type=file]").click(); var result = $(this).parent(); var input = $(this).parents(".add_imgs").find("input[type=file]"); dads(result,input); }) function dads(result,input){ if(typeof FileReader==='undefined'){ result.innerHTML = "抱歉，你的浏览器不支持 FileReader"; input.setAttribute('disabled','disabled'); }else{ $(input).unbind("change").on("change",function(){ var file = this.files[0]; if(!/image\/\w+/.test(file.type)){ alert("文件必须为图片！"); return false; } var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function(e){ $(result).append('<img src="'https://www.jb51.net/+this.result+'" alt="" />'); } }) } } </script> </body> </html>