js上传图片预览，php后台接收实例，已改写为多图上传预览

上传图片预览这个出自超实用的js代码段，关于图片的处理那一章，php后台接收是网上比较少这方面的资源或者写得很复杂，这里简单记录。都是基于js

首先先调用两个文件夹animateManage.js和viewimg.js，可以在网上下载。相当好用。

关键点是FileReader这个知识点，可以读取文件的相关信息，包括路径。这是个关键点。

/*
* 调用FileReader 文件API的readAsDataURL，启动异步加载文件的数据，通过监听reade的onload事件，
* 等待数据加载完毕后，在回调函数onload事件中，通过reader的result属性即可获得图片文件的相关内容
* */
var reader = new FileReader(),
_file = this.files[0];      //读取被加载的文件对象

reader.onload = (function(file) {   //监听load事件
return function() {
options.previewImgSrc.setAttribute("src", this.result);
options.previewImgSrc.style.display = "block";
};
})(_file);

reader.onerror = function(){//监听文件读取的错误处理
alert("文件读取数据出错");
}
reader.readAsDataURL(_file);//读取文件内容···

注意，这是单张图片的预览。

接下来是后台

我用的是ajax来传给后台，其实ajax网上太多资料关于传文件了，其实没那么复杂，很简洁。

关键点在FormData这个对象。#add_goods_info这个是from的id

$("#add_btn").click(function()
{
var formData = new FormData($("#add_goods_info")[0]);
$.ajax({
type: "post",
//data:$("#add_goods_info").serialize(),
data: formData,
contentType: false,
processData: false,
url:"<?php echo site_url("gallery/update");?>",
dataType:"json",
success:function(data){
alert(data);
}
})
});

php后台按正常接收即可，抄w3c的例子也可以。

 

if (file_exists('./uploads/source/head/'.date('Y/m/d'))) {
$address = 'uploads/source/head/'.date('Y/m/d');
if (!file_exists($address. $_FILES["head_img"]["name"]))
{
move_uploaded_file($_FILES["head_img"]["tmp_name"],"$address"."/".$_FILES["head_img"]["name"]);
$where=array(
'original_img'=>"$address"."/".$_FILES["head_img"]["name"]
);
$this->gallery_model->update($goods_id,$where);
}
} else {
mkdir('./uploads/source/head/'.date('Y/m/d'), 0777,true);
$address = 'uploads/source/head/'.date('Y/m/d');
if (!file_exists($address. $_FILES["head_img"]["name"]))
{
move_uploaded_file($_FILES["head_img"]["tmp_name"],"$address"."/".$_FILES["head_img"]["name"]);
$where=array(
'original_img'=>"$address"."/".$_FILES["head_img"]["name"]
);
$this->gallery_model->update($goods_id,$where);
}
}

因为在js那里，书籍的高手已经做了详细的信息过滤，这里可根据自由做扩展验证。

最新个人修改，支持多图预览，关键单在于这次获取的是getElementsByName，然后通过数组来处理FileReader，同样有每行代码解析        upPreviewImgLong = function(options){//带参数进来
            //console.log(options);//两个对象
            //alert(options.previewImgSrc[1]);//一开始加载的是object HTMLImageElement;
            //alert(options.e[0]);
            var _e = options.e[0],//通过按钮来触发事件，可以通过for循环来处理，但是一直存在问题，为了事务流，暂时写实数量
            _s = options.e[1],
            _k = options.e[2],
            preloadImg = null;
            for (var i =0;i<options.e.length; i++) {
            _e.onchange = function(){//按钮点击事件
                var _v = this.value,
                        _body = document.body;
                picReg = /(.JPEG|.jpeg|.JPG|.jpg|.GIF|.gif|.BMP|.bmp|.PNG|.png){1}/;//图片正则
                if(!picReg.test(_v)){//简单的图片格式验证，这个可以实装
                    alert("请选择正确的图片格式");
                    return false;
                }
                //支持FileReader，现在浏览器都行了吧，要做这种效果，主要起效都在FileReader的对象中做手脚
                //取消不不支持FileReader的平稳退化，优化可读性
                    /*
                     * 调用FileReader 文件API的readAsDataURL，启动异步加载文件的数据，通过监听reade的onload事件，
                     * 等待数据加载完毕后，在回调函数onload事件中，通过reader的result属性即可获得图片文件的相关内容
                     * */
                    var reader = new FileReader(),
                            _file = this.files[0];      //读取被加载的文件对象,这个是files对象，不是指定图片的数组下标
                    reader.onload = (function(file) {   //监听load事件
                        return function() {
                            //alert(this.result);
                            options.previewImgSrc[0].setAttribute("src", this.result);//options.previewImgSrc[]的下标才是上传图片name的数组下标
                            options.previewImgSrc[0].style.display = "block";
                            options.previewImgSrc[0].style.width = "200px";
                            options.previewImgSrc[0].style.height = "200px";
                        };
                    })(_file);
                    reader.onerror = function(){//监听文件读取的错误处理
                        alert("文件读取数据出错");
                    }
                    reader.readAsDataURL(_file);//读取文件内容···
            }
            _s.onchange = function(){//按钮点击事件
                var _v = this.value,
                        _body = document.body;
                picReg = /(.JPEG|.jpeg|.JPG|.jpg|.GIF|.gif|.BMP|.bmp|.PNG|.png){1}/;//图片正则

                if(!picReg.test(_v)){//简单的图片格式验证，这个可以实装
                    alert("请选择正确的图片格式");
                    return false;
                }
                //支持FileReader，现在浏览器都行了吧，要做这种效果，主要起效都在FileReader的对象中做手脚

                    /*
                     * 调用FileReader 文件API的readAsDataURL，启动异步加载文件的数据，通过监听reade的onload事件，
                     * 等待数据加载完毕后，在回调函数onload事件中，通过reader的result属性即可获得图片文件的相关内容
                     * */
                    var reader = new FileReader(),
                            _file = this.files[0];      //读取被加载的文件对象
                    reader.onload = (function(file) {   //监听load事件
                        return function() {
                            //alert(this.result);
                            options.previewImgSrc[1].setAttribute("src", this.result);
                            options.previewImgSrc[1].style.display = "block";
                            options.previewImgSrc[1].style.width = "200px";
                            options.previewImgSrc[1].style.height = "200px";
                        };
                    })(_file);
                    reader.onerror = functi
ba58
on(){//监听文件读取的错误处理
                        alert("文件读取数据出错");
                    }
                    reader.readAsDataURL(_file);//读取文件内容···
            }
            _k.onchange = function(){//按钮点击事件
                var _v = this.value,
                        _body = document.body;
                picReg = /(.JPEG|.jpeg|.JPG|.jpg|.GIF|.gif|.BMP|.bmp|.PNG|.png){1}/;//图片正则

                if(!picReg.test(_v)){//简单的图片格式验证，这个可以实装
                    alert("请选择正确的图片格式");
                    return false;
                }
                //支持FileReader，现在浏览器都行了吧，要做这种效果，主要起效都在FileReader的对象中做手脚

                    /*
                     * 调用FileReader 文件API的readAsDataURL，启动异步加载文件的数据，通过监听reade的onload事件，
                     * 等待数据加载完毕后，在回调函数onload事件中，通过reader的result属性即可获得图片文件的相关内容
                     * */
                    var reader = new FileReader(),
                            _file = this.files[0];      //读取被加载的文件对象
                    reader.onload = (function(file) {   //监听load事件
                        return function() {
                            //alert(this.result);
                            options.previewImgSrc[2].setAttribute("src", this.result);
                            options.previewImgSrc[2].style.display = "block";
                            options.previewImgSrc[2].style.width = "200px";
                            options.previewImgSrc[2].style.height = "200px";
                        };
                    })(_file);
                    reader.onerror = function(){//监听文件读取的错误处理
                        alert("文件读取数据出错");
                    }
                    reader.readAsDataURL(_file);//读取文件内容···
            }
        }
        };

     function addImg(buttonName,imgName){
        upPreviewImgLong({//图片预览上传,调用函数
            "e":document.getElementsByName(buttonName),//这个是按钮name名
            "previewImgSrc":document.getElementsByName(imgName)//这个是图片name名
        })
    };
html文件
var add_longimgs=document.getElementById("add_longimgs");
add_longimgs.onclick=function(){
var goods_longimgs_num=document.getElementsByName("goods_longimgs[]");
if (goods_longimgs_num.length <= 2) {
addLong();
imgName="longs[]";
buttonName="goods_longimgs[]";
addImg(buttonName,imgName);
}else{
alert("为了上传速度的保证，请一次最多上传三张");
};
};

var add_imgs=document.getElementById("add_imgs");
add_imgs.onclick=function(){
var goods_longimgs_num=document.getElementsByName("goods_imgs[]");
if (goods_longimgs_num.length <= 2) {
addImgs();
imgName="imgs[]";
buttonName="goods_imgs[]";
addImg(buttonName,imgName);
}else{
alert("为了上传速度的保证，请一次最多上传三张");
};
};