资讯专栏INFORMATION COLUMN

js多图片上传

kviccn / 500人阅读

摘要:多图片上传这两天用原生徒手撸了个插件,写的不是很完美,在这里先介绍一下传统的面向过程的写法,还有很多不足,希望多多指正使用到的技术使用对象更灵活操作需要发送的表单文件使用对象允许应用程序异步操作本地文件将读取的文件转换为编码的字符串文件读取

Multi多图片上传

这两天用原生徒手撸了个插件,写的不是很完美,在这里先介绍一下传统的面向过程的javascript写法,还有很多不足,希望多多指正

使用到的技术

使用formDate对象:更灵活操作需要发送的表单文件

使用FileReader对象:允许web应用程序异步操作本地文件

FileReader.readAsDataURL()将读取的文件转换为base64编码的字符串

FileReader.onload()文件读取时触发该方法

FileReader.onerror()文件读取错误时触发该方法

可以参考MDN提供的API https://developer.mozilla.org...

关键函数
1.文件变动操作
//onchange只有在文件发生改动的时候会调用
inputFile.onchange = function(){
    progress = {value:0,count:this.files.length};
    for (var i = 0; i < this.files.length; i++)readerFile(this.files,i);
}
2.文件异步读取
function readerFile(files,index){
    var reader = new FileReader();
    var currFile =files[index];
    reader.readAsDataURL(currFile);
    if(checkFile(currFile,5)){
        reader.onload = function(e){
            currFile.result = e.target.result;
            fileData.push({  //格式整理
                name:currFile.name,
                type:currFile.type,
                size:currFile.size,
                lastModified:currFile.lastModified,
                result:currFile.result
            });
            createDOM(currFile)
            progress.value+=1;
            var num = progress.value/progress.count*100;
            if(progress.value>=progress.count){
                console.log(fileData.length+"个文件已全部读取完成!");
            }
        }
        reader.onerror = function(){
            console.log("文件上传失败!");
        }
    }
}
3.文件上传
uploadBtn.onclick = function(){
    formData = new FormData(formDom);
    formData.set("files",JSON.stringify(fileData));
    console.log(formData)
    //封装完成 暂无接口测试
    ajax({
        url:"",
        type:"POST",
        data:formData,
        success:function(){
            console.log("上传成功")
        },
        error:function(){
            console.log("上传失败")
        }
    })
}
4.文件格式、大小、数量、重复等检测
function checkFile(currFile,max){
    var isLegal = true;
    if(["image/png","image/jpeg","image/jpg","image/gif"].indexOf(currFile.type)==-1){
        console.log("文件类型只允许:png、jpg、gif");
        isLegal = false;
    }
    if(currFile.size > 2048*1024){
        console.log("文件大小超出限制,最大允许 2 MB");
        isLegal = false;
    }
    if(fileExists(currFile.name+currFile.lastModified)){
        console.log(currFile.name+",文件重复");
        isLegal = false;
    }
    if(fileData.length>=max){
        console.log("文件数量超出,最多上传"+max+"张图片");
        isLegal = false;
    }
    return isLegal;
}
5.文件去重(通过文件名和文件修改时间判断)
function fileExists(checkFlag){
    var isRepeat = false;
    console.log(fileData)
    fileData.forEach(function(f){
        if(f.name + f.lastModified === checkFlag)isRepeat = true;
    });
    return isRepeat;
}
6.创建图片缩略图(缩略图点击删除)(可省略)

我这里是为了更直观地看到上传效果

function createDOM(currFile){
    var img = new Image();
    img.src = currFile.result;
    var li = document.createElement("li");
    li.appendChild(img);
    ul.appendChild(li);
    li.key = currFile.name + currFile.lastModified;  //给每个缩略图一个标识
    li.addEventListener("click",function(){
        var _li = this; //标识当前li元素
        ul.removeChild(this);
        fileData.forEach(function(f,i){
            if(f.name+f.lastModified == _li.key)fileData.splice(i,1);
        })
    })
}
7.上传操作(ajax封装)

这里只做post的封装

function ajax(options){
    var defaultOptions = {
        url:"",
        type:"",
        data:null,
        dataType:"json",
        success:function(){},
        error:function(){}
    }
    options = Object.assign({},defaultOptions,options);
    if(window.XMLHttpRequest){
        var xhr = new XMLHttpRequest();
    }else{
        var xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4){
            if(xhr.status === 200){
                options.success();
            }else{
                options.error();
            }
        }
    }
    xhr.open(options.type,options.url,true);
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=utf-8");
    xhr.send(options.data);
}
以上的代码是全部的js逻辑,如果想更直观地看到效果,可将下面的html+css代码进行ctrl+v
/*css*/




    上传图片

    好像有点多啊,这是我初步的代码,封装好的完整的代码在我的github上
    有兴趣的可以去看看,大家多多批评
    https://github.com/mqr123/too...

    文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

    转载请注明本文地址:https://www.ucloud.cn/yun/93988.html

    相关文章

    • 文件上传的几种方法——plupload篇

      摘要:然鹅,因为是要上传到七牛,遇到了跨域的问题,尝试过网上的几种解决方法,都没用。一开始以为是一下子上传太多张的缘故,就把改为,然鹅还是会报错。。。 其实用这个组件之前,原先是想接着用webuploader的,毕竟用过了,比较熟悉,而且也很好用。然鹅,因为是要上传到七牛,遇到了跨域的问题,尝试过网上的几种解决方法,都没用。只好用七牛文档里面的plupload,hhhhhh,官方文档推荐的,...

      mingzhong 评论0 收藏0
    • 用element的upload组件实现图片上传和压缩

      摘要:我用做状态管理,七牛云做图床。关于该组件的其他用法可以在的官方文档查阅上传对图片进行压缩压缩图片的质量对图片进行压缩压缩图片实现起来比较简单。前端向后端请求上传。 我用vuex做状态管理,七牛云做图床。 项目地址:多图片上传组件 效果展示 showImg(https://segmentfault.com/img/bVbocgG?w=960&h=516); 项目执行流程 首先,让我们来分...

      zorro 评论0 收藏0
    • 基于Vue + Node.js + MongoDB的图片上传组件,实现图片的预览和删除

      摘要:网址功能单图多图上传图片上传预览上传进度条分组上传,分组查询新建分组,删除分组删除图片选择图片目录结构前端利用搭建,中引入子组件。实现分组的新增查询删除。利用模块实现删除文件功能。 公司要写一些为自身业务量身定制的的组件,要基于Vue,写完后扩展了一下功能,选择写图片上传是因为自己之前一直对这个功能比较迷糊,所以这次好好了解了一下。演示在网址打开后的show.gif中。 使用技术:Vu...

      hzx 评论0 收藏0
    • 前端文件上传(js/vue.js/axios/canvas图片压缩)

      摘要:哈哈主要还是我嫌麻烦四上传图片这里的页面样式,图片压缩和预览都和上面一样,这里我主要配置一下的,让接口能够成功上传。如果想让用户有更好的体验,可以对图片进行一下压缩和本地预览。 一、通过Form表单提交上传 HTML enctype属性必不可少 上面一种方法通过表单自有属性进行提交,看似简单,但是也有其最大的缺点,那就是提交...

      Luosunce 评论0 收藏0
    • 前端文件上传(js/vue.js/axios/canvas图片压缩)

      摘要:哈哈主要还是我嫌麻烦四上传图片这里的页面样式,图片压缩和预览都和上面一样,这里我主要配置一下的,让接口能够成功上传。如果想让用户有更好的体验,可以对图片进行一下压缩和本地预览。 一、通过Form表单提交上传 HTML enctype属性必不可少 上面一种方法通过表单自有属性进行提交,看似简单,但是也有其最大的缺点,那就是提交...

      Lsnsh 评论0 收藏0

    发表评论

    0条评论

    kviccn

    |高级讲师

    TA的文章

    阅读更多
    最新活动
    阅读需要支付1元查看
    <