使用JS配合表单上传图片并预览

2022-09-24 11:03:33

一、背景和需求

在商家上架新商品时，需要从本地上传商品图片并预览
将图片连同其他商品信息放入表单，通过POST请求发送给后端

二、HTML代码

<div class="box">
<div class="box-left">
    <div class="title"><h1>上传商品图片</h1></div>
    <div class="sizeHint">（图片大小不得超过2M）</div>
    
    <div class="content">
        <div id="img">图片预览</div>
        <form id="form1" action="">
            <input type="file" name="file" id="pic" onchange="preview(this,‘img‘)">
        </form>
        <div class="link">
            <a href="/backstage/" id="link">返回后台管理页面</a>
        </div>
    </div>
</div>

三、实现思路

1、通过 [type=file] 的input上传文件

为这个 [type=file] 的input绑定onchange事件
将接收到的图片文件传到preview函数中
检测文件类型和大小是否符合要求

2、将文件以Data URL形式读入页面

创建FileReader实例
通过onload函数将图片渲染到页面上

3、通过Ajax发送FormData数据类型的POST请求

先利用已有的表单（商品数据）初始化Formdata实例
再通过append方法将图片文件追加到Formdata实例内

四、相关JS代码

关于图片的上传和预览：

function preview(file,img)
{  
    if (file.files && file.files[0]){     
        var size = file.files[0].size;
        if(size > 2 * 1024*1024){
            alert("上传大小不符合");
            return false;
        }
         // 获取文件名 包含后缀  
         var src = file.files[0].name;  
         // 获取文件后缀                                                      
         var type=(src.substr(src.lastIndexOf("."))).toLowerCase(); 
        // 判断文件类型                                   
        if(type != ".jpg" && type != ".gif" && type !=".jpeg" && type != ".png"){           
            alert("您上传图片的类型不符合(.jpg|.jpeg|.gif|.png)！");
            return false;
        }
          
        var reader = new FileReader(); 

        //将文件以Data URL形式读入页面
        reader.readAsDataURL(file.files[0]); 

        var prevDiv = document.getElementById(img);  

        //成功读取后 显示图片           
        reader.onload = function(evt){                  
            prevDiv.innerHTML = ‘<img src="‘ + evt.srcElement.result + ‘" style="max-width:220px;" />‘;             
        }  
    }  
}

Ajax请求：

 $(function(){
     //为“立即添加”按钮绑定click事件
     $(‘#btn-submit‘).click(function()
    {
        // 用已有表单来初始化
        var formData = new FormData($("#new")[0]);

        //将图片文件对象添加到formData中        
        formData.append(‘img‘, $("#pic")[0].files[0]); 
        formData.append(‘csrfmiddlewaretoken‘, ‘{{ csrf_token }}‘);

        $.ajax({
            type : ‘post‘,

            //这里写后端处理的url
            url : ‘ ‘,
         
            data : formData,

            cache : false,

            async: false,
            // 不处理发送的数据，因为data值是Formdata对象，不需要对数据做处理
            processData : false, 

            // 不设置Content-type请求头
            contentType : false, 

            success : function()    {        },

            error : function(){   }
        })
    });
 });

完整的源代码请前往我的github仓库

五、效果图