上传文件，直接预览展示

最新推荐文章于 2025-04-25 15:50:30 发布

qq_30804543

最新推荐文章于 2025-04-25 15:50:30 发布

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端功能文章标签：前端文件上传

本文链接：https://blog.youkuaiyun.com/qq_30804543/article/details/79134973

前端功能专栏收录该内容

1 篇文章

订阅专栏

这篇博客展示了如何使用HTML5实现文件上传并实时预览。通过创建FormData对象，获取文件并使用FileReader读取文件内容，将其转换为Base64编码，然后在页面上显示预览图像。虽然没有实现完整的上传功能，但提供了读取和预览文件的基础代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接上代码，真实有效

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>html5实现上传</title> <style type="text/css"> #result{ width: 200px; height:112px; border:1px solid #eee; } #result img{ width: 200px; } input{ width: 70px; margin-top: 10px; } @-moz-document url-prefix() { input { width:65px; } }/*单独对火狐进行设置*/ </style></head><body> <div id = "result"></div> <input id="pic" type="file" name = 'pic' accept = "image/*" onchange = "selectFile()"/>  <script type="text/javascript"> //var files = document.getElementById('pic').files; var form = new FormData();//通过HTML表单创建FormData对象 var url = '127.0.0.1:8080/' function selectFile(){ var files = document.getElementById('pic').files; console.log(files[0]); if(files.length == 0){ return; } var file = files[0]; //把上传的图片显示出来 var reader = new FileReader(); // 将文件以Data URL形式进行读入页面 console.log(reader); reader.readAsBinaryString(file); reader.onload = function(f){ var result = document.getElementById("result"); var src = "data:" + file.type + ";base64," + window.btoa(this.result); result.innerHTML = '<img src ="'+src+'"/>'; } console.log('file',file); /// form.append('file',file); console.log(form.get('file')); } //var xhr = new XMLHttpRequest(); // function handIn(){ // console.log(form.get('file')); // xhr.open("post", url, true); // xhr.addEventListener("readystatechange", function() { // var result = xhr; // if (result.status != 200) { //error // console.log('上传失败', result.status, result.statusText, result.response); // } // else if (result.readyState == 4) { //finished // console.log('上传成功', result); // } // }); // } </script></body></html>