基于HTML5 FileReader创建图片上传预览图

最新推荐文章于 2023-12-22 14:08:24 发布
最新推荐文章于 2023-12-22 14:08:24 发布
阅读量678 收藏
点赞数 2
分类专栏： 精彩世界 文章标签： HTML5 FileReader 预览图 上传

      哈哈哈今天和一个90后小哥学了一个缩略图的东东。。。。js搞定的。。。。

  代码如下


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5 FileReader</title>
</head>
<body>
<center>
<input type="file" id="file" οnchange="readAsDataURL()">
<div id="thumb"></div>

<script type="text/javascript">
    // 判断浏览器是否支持 FileReader
    if (typeof FileReader == 'undefined') {
        console.error('你的浏览器不支持FileReader属性');
    }

    var selector = document.getElementById('file');

    // 将文件读取为DataURL
    function readAsDataURL() {
        var file = selector.files[0];
        // 检测是否为图片类型
        if (!/image\/\w+/.test(file.type)) {
            console.error('选择的文件不是图片');
            return false;
        }

        var reader = new FileReader();

        // 注意，readAsDataURL 读取文件是没有返回值的
        reader.readAsDataURL(file);

        // 文件读取完毕执行
        reader.onload = function (data) {
            // 获取到文件路径
            var data_url = data.currentTarget.result;
            document.getElementById('thumb').innerHTML='<img src="'+data_url+'" width="100px" height="180px">';
        }
    }
</script>
</center>
</body>
</html>

小哥的博客网址为这个https://www.zrong.me/archives/139.html 。。。。

Cam大少爷
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯前端实现图片上传预览（filereader ）
11-23
纯前端实现图片上传预览（filereader ），HTML5 filereader 实现
利用FileReader实现上传图片前本地预览
weixin_34341117的博客
03-02 130
引子 平时做图片上传预览时如果没有特殊的要求就直接先把图片传到后台去，成功之后拿到URL再渲染到页面上，这样做在图片比较小的时候没什么问题，大一点的话就会比较慢才能看到预览了，而且还产生了垃圾文件，所以比较好的是上传之前先在本地预览一下。 之前做项找插件的时候就知道纯前端可以实现图片本地预览，可今天面试的时候被问到时竟然一脸懵逼，然后竟然无意中就在电脑桌面发现了实现的dem...
FileReader上传图片
weixin_30512089的博客
08-13 86
实现拖拽图片，在上传至服务器前，显示图片并操控大小 利用HTML5 dragenter dragover dragleave drop 在实现图片显示方面，用了FileReader这个类 var files=event.dataTransfer.files;//获取拖拽的图片集合 filereader.readAsDataURL(files[i]); 利用this.result ...
利用fileReader上传文件
sumimg的博客
04-22 620
上传图片base64 <div>上传图片</div> <div class="alert-box-item" > <input @change="uploadFile($event)" type="file"> //用来打开手机或者电脑端的文件，然后读取文件 <img :src...
使用FileReader制作一个简短图片上传
在无知中学习，在学习中成长，在成长中学习
11-22 248
使用 FileReader() 构造器去创建一个新的 FileReader
HTML5图片验证及上传实例：学习FileReader/Image
J.Jian博客
05-09 1150
FileReader() 实现文件上传
qq_38686150的博客
11-20 552
FileReader() 实现文件上传 input file的属性 accept [əkˈsept] 可选择的文件类型 例如：“image/*” multiple [ˈmʌltɪpl] 允许用户选择多个文件 选取的文件集合 FileList 0:File name: “1.png” size: 994567 type: “image/png” length:1 文件读取类 FileReader.readAsDataURL FileReader.readAsArrayBuffer FileReader.r
php filereader,FileReader上传文件
weixin_35396246的博客
03-19 170
FileReader对象允许web应用程序异步读取存储在计算机上的文件的内容，使用File或Bolb对象指定要读取的文件或数据。其中File对象可以是来自用户在一个元素上选择文件后返回的FileList对象，也可以是来自拖放操作生成的DataTransfer对象，还可以是来自在一个HTMLCanvasElement上执行的mozGetAsFile()方法后返回结果。属性FileReader.err...
h5 FileReader 上传文件
weixin_33725515的博客
10-31 107
2019独角兽企业重金招聘Python工程师标准>>> ...
通过 html5 FileReader 实现上传图片预览功能
强强强子的博客
03-27 2650
Html 部分 JS部分 function showPreview(source) { var file = source.files[0]; if (window.FileReader) { var
JavaScript使用FileReader对象实现图片上传预览
曼巴童鞋-博客
10-22 626
一个简单的实例，JavaScript实现图片上传预览。
使用html5 FileReader获取图片，并异步上传到服务器 不使用iframe
qq_43679771的博客
02-01 219
使用html5 FileReader获取图片，并异步上传到服务器 不使用iframe
html5的FileReader实现图片上传预览并生成base64
叮叮当当_技术与营销
08-18 1391
利用html5的FileReader实现图片上传预览并生成base64。HTML5定义了FileReader作为文件API的重要成员用于读取文件，根据W3C的定义，FileReader接口提供了读取文件的方法和包含读取结果的事件模型。
使用FileReader 预览表单上传文件/图片
u012955801的博客
03-15 310
1、先上一段代码，能够读取文件/图片的代码 //html &lt;div class="img-container upload"&gt;&lt;img class="img-style" src="" alt="" id="show-img"&gt;&lt;/div&gt; &lt;input class="fileID" ty
FileReader上传文件即使显示（但不负责持久化， 只是内存中的回显处理）
qwbtc的博客
08-02 1149
FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL。Data URL是一项特殊的技术，可以将资料(例如图片)内嵌在网页之中，不用放到外部文件。使用Data URL的好处是，您不需要额外再发出一个HTTP 请求到服务器端取得额外的资料；而缺点便是，网页的大小可能会变大。它适合应用在内嵌小图片，不建议将大图像文件编码成Data URL来使用。您的图像文件不
HTML5文件上传FileReader API
蓝色的乌鸦的专栏
10-29 823
很好的文章,很有帮助,以后会用到,自己先备注一下
[HTML5] FileReader 上传文件读取
八佾舞于庭
10-10 421
new FileReader(); function upLoadImg(){ var file = document.getElementById('upLoadImg1').files[0];//选择的文件对象 // console.log(file instanceof Blob);//true file 对象是特殊类型的 Blob // console.log(Blob)...
前端--文件上传--文件切片--利用FileReader()中的readAsDataURL()做缩略图--多文件上传--formData--切片上传实现
墨苒孤的博客
04-12 2609
前端最常见的就是添加一个multiple 属性，这样在上传的时候只要按住Ctrl 就可以选择多个文件了，这样的方式对用户不够友好，因为有些用户是不知道按住Ctrl 可以选择多个文件的，一般来说，用户只会一个文件，一个文件来上传的。图片可以通过转成Base64 的方式，文件一般使用 formData来进行传输，可以说，formData 就是一个载体，负责装载文件。//用户一个一个选择文件，直接push存储起来，符合用户习惯。//结合 multiple属性，可以上传多个文件，"文件大小不能超过10M"
H5上传文件及FileReader的使用
最新发布
zjj2010xueyou的博客
12-22 737
input.addEventListener('change', function () { // 通过change 事件监听表单是否有变化。const input = document.createElement('input') // 创建一个input。// input.hidden = 'hidden' // 将表单进行隐藏，hidden在手机端不起作用，pc端可以。input.multiple = 'multiple'//实现文件多选，单选可不写此属性。//下面是你自己的代码。
js filereader 上传图片 multipartfile
09-04
利用JavaScript中的FileReader对象可以实现在浏览器中读取本地文件的功能。而在后端可以使用Spring Boot框架的MultipartFile来接收上传的文件。 首先，在前端页面的js文件中，可以创建一个FileReader对象来读取用户选择的图片文件： ```javascript // 前端页面 const fileInput = document.getElementById('fileInput'); const reader = new FileReader(); fileInput.addEventListener('change', function(event) { const file = event.target.files[0]; reader.readAsDataURL(file); }); reader.onload = function(event) { const base64String = event.target.result; // 将base64格式的图片数据发送到后端 // 发送请求的代码 } ``` 当用户选择了图片文件，并触发change事件后，FileReader会读取图片文件的内容，并将其转换为base64编码的字符串。该字符串可以通过发送请求将图片数据传递给后端。 接下来，在后端的Controller中，可以使用@RequestParam注解来声明一个MultipartFile类型的参数，用于接收前端传递过来的图片文件： ```java // 后端Controller @RestController public class UploadController { @PostMapping("/upload") public String uploadImage(@RequestParam("file") MultipartFile file) { // 处理上传的图片文件 // 返回结果 } } ``` 注意，在上述代码中，@PostMapping注解用于指定请求路径，@RequestParam注解用于声明接收的文件参数名。 在Controller中，可以根据具体的业务需求，对上传的图片文件进行处理，例如保存到服务器的本地目录或者将图片数据保存到数据库中。处理完成后，可以返回一些结果信息给前端。 以上就是使用JavaScript的FileReader对象和Spring Boot框架的MultipartFile来实现图片上传的简单流程。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值