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 = function(){//监听文件读取的错误处理                        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("为了上传速度的保证，请一次最多上传三张");    };};