ajax实现图片上传并预览

实现原理：
这里我实现图片上传的思路是通过input file框的change事件将获取上传的图片内容，通过ajax把它上传到后台的文件临时存放目录，后台返回url传回前台，前台就可以实现预览，然后form表单提交时再移动到指定存储路径！

        //input file框change事件触发,实现图片预览
        $('#images').on('change',function(){ 
                var data = new FormData();
                //获取文件内容
                data.append('images',$(this)[0].files[0]);
                $.ajax({
                    url:'/api/goods/createTmp',
                    data:data,
                    type:'post',
                    dataType:'JSON',
                    processData:false,
                    cache: false,
                    contentType: false,         
                    success:function(res){ 
                        if(res.status){
                            console.log(res.msg);
                            tmp_url=res.url;
                            var show="<img width='180' height='180' src="+tmp_url+">&nbsp;";
                            $('#span').append(show);
                        }else{
                            console.log(res);
                        }
                    },
                    error:function(res){ 
                        console.log(res.msg);
                    }
                })
        });

点击添加按钮后完成图片的移动：

                    var len=$('#span img').length;
                    var img_arr=new Array();
                    for(var i=0;i<len;i++){
                        var url=$('#span img').eq(i).attr('src');
                        img_arr.push(url);
                    }
                    var up_path='';
                $.ajax({
                    url:'/api/goods/getimg',
                    data:{
  'img_url':img_arr},
                    type:'post',
                    //同步上传才可以将匿名函数内的内容传给up_path
                    async:false,
                    dataType:'json',
                    success:function(data){ 
                        console.log(data.url);
                        up_path= data.url;
                    },
                    error:function(data){ 
                        console.log(data);
                    }
                })

原文链接：https://blog.csdn.net/living_ren/article/details/79913439

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。