FileReader多图片上传

最新推荐文章于 2023-05-02 16:41:39 发布
最新推荐文章于 2023-05-02 16:41:39 发布
阅读量1.9k 收藏
点赞数 1
分类专栏： 工作日记 文章标签： 图片 上传图片 FileReader
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wjy199506/article/details/62046093
版权 
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title> 上传多张图片</title>
    <style type="text/css">
        .img-div{
            float: left;
            line-height: 1;
            margin-left: 5px;
            overflow: hidden;
        }

    </style>
</head>
<body>
<script src="jquery-2.0.3.min.js"></script>
<script type="text/javascript">
    //选择图片，马上预览  
    function xmTanUploadImg(obj) {

        var fl=obj.files.length;
        for(var i=0;i<fl;i++){
            var file=obj.files[i];
//            判断图片
            if(!/image\/\w+/.test(file.type)){
                alert('请上传图片!');
                return false;
            }
            var reader = new FileReader();
            //读取文件过程方法
            reader.onerror = function (e) {
                console.log("读取异常....");
            }
            reader.onload = function (e) {
                var imgstr='<img style="width:100px;height:100px;" src="'+e.target.result+'"/>';
                var oimgbox=document.getElementById("imgboxid");
                var ndiv=document.createElement("div");//创建div节点

                //限制上传的图片数
                var a=$('#imgboxid>div').length;
                if(a<5){
                    ndiv.innerHTML=imgstr;
                    ndiv.className="img-div";
                    oimgbox.appendChild(ndiv);
                }else{
                    alert('最多5张图片');
                }
            }
            reader.readAsDataURL(file);
        }

    }
</script>
    <input type="file" id="xdaTanFileImg"  multiple="multiple"  name="fileAttach" onchange="xmTanUploadImg(this)"/>
    <!--图片显示位置-->
    <div class="img-box" id="imgboxid">
    </div>
</body>
一位不愿透露姓名的大英俊
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯前端实现图片上传预览（filereader ）
11-23
纯前端实现图片上传预览（filereader ），HTML5 filereader 实现
php ajax formdata 进度,ajax利用FormData、FileReader实现多文件上传php获取
weixin_39958137的博客
03-09 129
前台代码(注意，不需要用到form标签)：a. html部分：b. js部分：c. 完整代码：function loadDoc(file,data,async=true){if(window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp=new XMLHttpRequest();}else{ /...
多文件上传
入门级选手的博客
06-21 117
@PostMapping("uploads") public void uploads(MultipartFile[] multipartFiles, HttpServletRequest request){ List list = new ArrayList(); if (multipartFiles.length>0){ for (int i = 0; i < multipartFiles.length; i++) { Multipa.
前台页面FileReader多文件上传与回显
qq_39529324的博客
05-15 1709
做项目时，要用到图片上传，可是框架内没有封装任何文件上传控件，只能用 input file ,可是却不能回显，只能去网上查找，结果都是一些jquery插件。插件都很大，而且样式都封装了，和项目框架不搭，就想知道js有没有可以直接会显得方法，结果还真找到了。仅仅一个HTML就可以支持图片上传回显，而且样式可以自己修改，只是比较简洁，不过够用了。[html] view plain copy &lt;!...
基于FileReader多图片上传插件.zip
07-04
基于FileReader多图片上传插件是一款通过不同的选择器class 应用不同的样式，支持单张图片上传控制，多张图片上传控制， 点击预选图片可以进行删除。
基于FileReader多图片上传插件特效代码
03-20
"基于FileReader多图片上传插件特效代码" 提供了一种高级的解决方案，允许用户方便地上传多张图片，并具备预览和删除功能。这个插件是利用HTML5的File API中的FileReader接口来实现的，为网页应用提供了强大的本地...
基于FileReader多图片上传特效源码.zip
11-09
【标题】"基于FileReader多图片上传特效源码.zip" 提供的是一个前端开发中的功能实现，即利用JavaScript的FileReader API实现多图片预览和上传的特效代码。这个源码包可能是为了帮助开发者创建一个用户友好的、交互...
javascript结合fileReader 实现上传图片
10-24
FileReader具体支持哪些方法和事件，这里就不介绍了，有兴趣的可以去w3c官网上看看FileReader介绍，这里主要介绍一下FileReader常见应用，以及fileReader 实现上传图片示例分享。
FileReader上传多张图片
小划乐的博客
04-25 1803
使用Promise实现同步处理 <div> <input type="file" accept="image/*" @change="setImage" multiple="multiple"/> </div> <script> setImage(e) { let that = this ...
JS 文件上传之 FileReader
Rand Tsui
03-20 3289
SA $.domLoad(function () { $("#bt").onclick = function () { var file = document.createElement("input"); file.setAttribute("type","fil
使用FileReader对象进行文件操作
longtengg1的博客
05-25 291
FileReader对象，用于把文件读入内存，并且读取文件中的数据。 <input type="file" id="file" multiple> <!-- 添加multiple属性就可以提交多个文件 --> <input type="button" id="btn" value="提交"> btn.onclick = function () { var list = file.files;
js文件上传解析文件 FileReader()
h360583690的博客
05-02 509
FileReader()
FileReader()读取文件、图片上传预览
油墨香^-^的博客
02-16 2316
FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。其中File对象可以是来自用户在一个元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个htmlCanvasElement上执行mozGetAsFile()方法后返回结果。
用FileReader对象 上传图片
fan2016434589的博客
11-26 1126
应用场景 ——上传图片 原生的 input ，设置大小并把透明度设为0，其他样式自己设计就好 html，根据设计图自己设计即可 <div > <span> <!-- 加号 ➕ --> <img src="@static/images/icon/add_img.png" /> <...
html5 FileReader 实现本地图片上传并预览应用实例
baidu_41601048的博客
01-07 1万+
1、FileReader接口的方法 FileReader接口有4个方法，其中3个用来读取文件，另一个用来中断读取。无论读取成功或失败，方法并不会返回读取结果，这一结果存储在result属性中。   FileReader接口的方法 方法名 参数 描述 readAsBinaryString file 将文件读取为二进制编码 readAsText file,...
利用FileReader实现多图片上传浏览重点记录
mister 代
06-12 650
FileReader用Base64对文件流进行编码var files = document.getElementById("file").files;    if (files.length &lt; 5) {            for (var i = 0; i &lt; files.length; i++) {                /**                 * 隐藏...
通过FileReader实现多张图片转换成base64、上传、预览、删除
przlovecsdn的博客
05-16 3806
    方法名 参数 描述 abort none 中断读取 readAsBinaryString file（blob） 将文件读取为二进制码 readAsDataURL file（blob） 将文件读取为 DataURL readAsText file, （blob） 将文件读取为文本 事件 描述 o...
利用FileReader和FormData实现图片预览和上传(base64转二进制文件)
热门推荐
hsany330的专栏
09-18 2万+
业务有个需求，要做图片预览上传，过去都是客户端上传给后端，后端返回 url 前端进行预览，现在其实可以不依赖后端做预览，最后在上传，这主要依赖 FileReader 和 FormData 这两个对象和 JavaScript 处理二进制的能力。 OK，Show code~，以下代码已注释掉具体业务逻辑和实现，如果需要了解 API 细节，可以请参考： https://developer
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、付费专栏及课程。

余额充值