input type=file实现图片上传，预览以及图片删除

时间 2019-11-19

标签 input type file 实现图片上传预览以及删除繁體版

原文原文链接

背景

前两天在作一个PC网站的意见反馈，其中涉及到了图片上传功能，要求能够上传多张图片，而且支持图片上传预览及图片删除，
图片上传这一块之前没怎么搞过，并且通常也不多会碰到这样的需求，因此在作这个功能的时候，参考了不少网上的代码，
如今就单独写一篇博客来记录下实现的整个过程，以及在作的过程当中遇到的一些坑。css

先来看下实现的最后效果：
html

首先先建立好一个用于展现预览图片及上传按钮的div，content-img-list用于动态展现预览图片，file用于显示上传按钮jquery

<div class="content-img">
            <ul class="content-img-list">
                <!-- <li class="content-img-list-item"><img src="https://www.baidu.com/img/bd_logo1.png" alt=""><a class="delete-btn"><i class="ico-delete"></i></a></li> -->
            </ul>
            <div class="file">
                <i class="ico-plus"></i>上传图片，支持jpg/png<input type="file" name="file" accept="image/*" id="upload" >
            </div>  
        </div>

上传按钮美化

默认input type=file的上传按钮很是的丑陋，实现自定义上传按钮样式，这里主要经过设置input的透明度将它设置为opacity: 0;git

图片上传实现步骤

图片上传

经过jquery监听input change事件，这样咱们能够获取到上传的图片流信息，从而能够获取到图片的地址、大小、格式以及名称等信息github

这里建立3个数组，imgName、imgSrc、imgFile分别用于存放上传图片的名称、url地址以及图片流信息web

var fileList = this.files;
        for(var i = 0; i < fileList.length; i++) {
            var imgSrcI = getObjectURL(fileList[i]);
            imgName.push(fileList[i].name);
            imgSrc.push(imgSrcI);
            imgFile.push(fileList[i]);
        }

getObjectURL方法是一个用于获取本地图片的地址，使用该url能够显示图片ajax

function getObjectURL(file) {
    var url = null ;
    if (window.createObjectURL!=undefined) { // basic
        url = window.createObjectURL(file) ;
    } else if (window.URL!=undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file) ;
    } else if (window.webkitURL!=undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file) ;
    }
    return url ;
}

控制上传图片大小、格式以及上传数量

$('#upload').on('change',function(){        
          if(imgSrc.length==4){
            return alert("最多只能上传4张图片");
        }
        var imgSize = this.files[0].size;  //b
        if(imgSize>1024*1024*1){//1M
            return alert("上传图片不能超过1M");
        }
        if(this.files[0].type != 'image/png' && this.files[0].type != 'image/jpeg' && this.files[0].type != 'image/gif'){
            return alert("图片上传格式不正确");
        }
    })

图片预览

建立一个addNewContent方法用于动态展现添加的图片实现图片预览，在每次上传图片的时候调用该方法chrome

function addNewContent(obj) {
    $(obj).html("");
    for(var a = 0; a < imgSrc.length; a++) {
        var oldBox = $(obj).html();
        $(obj).html(oldBox + '<li class="content-img-list-item"><img src="'+imgSrc[a]+'" alt=""><a index="'+a+'" class="hide delete-btn"><i class="ico-delete"></i></a></li>');
    }
}

图片删除

1.经过监听鼠标的mouseover事件，显示图片删除按钮json

$('.content-img-list').on('mouseover','.content-img-list-item',function(){
        $(this).children('a').removeClass('hide');
    });

2.监听鼠标的mouseleave事件，隐藏图片删除按钮segmentfault

$('.content-img-list').on('mouseleave','.content-img-list-item',function(){
        $(this).children('a').addClass('hide');
    });

3.获取图片index下标属性，经过js的splice方法删除数组元素，从新调用addNewContent方法遍历图片数组显示预览图片

$(".content-img-list").on("click",'.content-img-list-item a',function(){
            var index = $(this).attr("index");
            imgSrc.splice(index, 1);
            imgFile.splice(index, 1);
            imgName.splice(index, 1);
            var boxId = ".content-img-list";
            addNewContent(boxId);
            if(imgSrc.length<4){//显示上传按钮
                $('.content-img .file').show();
            }
      });

图片上传提交

这里主要使用FormData来拼装好数据参数，提交到后台

var formFile = new FormData();

遍历imgFile图片流数组拼装到FormData中

$.each(imgFile, function(i, file){
            formFile.append('myFile[]', file);
        });

添加其余参数

formFile.append("type", type); 
        formFile.append("content", content); 
        formFile.append("mobile", mobile);

最后使用ajax提交内容

$.ajax({
            url: 'http://zhangykwww.yind123.com/webapi/feedback',
            type: 'POST',
            data: formFile,
            async: true,  
            cache: false,  
            contentType: false, 
            processData: false, 
            // traditional:true,
            dataType:'json',
            success: function(res) {
                console.log(res);
            }
        })

以上就实现了图片上传、图片预览和图片删除的功能

实现过程当中遇到的坑

1.解决input file上传图片没法上传相同的图片若是是相同图片onChange事件只会触发一次
onChange里面清除元素的value

document.querySelector('#uploader-get-file').value = null

也能够这样this.value = null;

$('#upload').on('change',function(){//图片上传
        this.value = null;//解决没法上传相同图片的问题
})

2.使用formData上传file数组 3种方式（参考https://segmentfault.com/q/1010000009622562）

方式1：
$.each(getImgFiles(), function(i, file){
    formData.append('files', file);
});
方式2：
$.each(getImgFiles(), function(i, file){
    formData.append('files[]', file);
});
方式3：
$.each(getImgFiles(), function(i, file){
    formData.append('files_' + i, file);
});

3.jquery设置 ajax属性

processData : false, // 告诉jQuery不要去处理发送的数据
contentType : false,// 告诉jQuery不要去设置Content-Type请求头

戳我在线查看demo

完整的代码我已经上传到了https://github.com/fozero/frontcode，能够点击查看，若是以为还不错的话，记得star一下哦！

做者：fozero
声明：原创文章，转载请注明出处，谢谢！http://www.cnblogs.com/fozero/p/8835628.html 标签：input,file,图片上传