js读取图片以及AJAX上传图片注意事项

分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识,造福人民,实现我们中华民族伟大复兴!

               

对于读取一个文件,图片,大家都很熟悉,但是这里面必须注意一些细节问题。

首先我们必须保证我们的图片读取成功了,以及读取完成了,读取成功,大家都会判断,而这个读取完成了,大家往往会忽略掉它,

这里,我提供一个我自己写的经常用的一个函数模板吧,其实不是什么函数模板,只是经常这么写而已,对此,我希望读者可以去看看js里面的Image()对象的属性判断的方法什么的,对大家有好处,下面我为大家给截图过来了,大家可以看看,同时提供链接

点击打开链接



onload----我们就会用到,当图像装载完毕是调用的事件句柄。


其中window.ActiveXObject的使用是为了IE浏览器的兼容性

现在讲解图片加载完全的代码:

/** * * @param $imgURL//加载图片的地址 * @param callback//加载完成后腰进行的动作 */function checkImgLoaded($imgURL, callback){    var $img = new Image();//创建Image()对象    $img.src = $imgURL;//赋值    if(!!window.ActiveXObject){//判断是否为IE浏览器        $img.onreadystatechange = function(){//使用ActiveX控件            if(this.readystate == "complete" || this.readystate == "loaded"){                callback();            }        }    }    else{        $img.onload = function(){            callback();        }    }}


/*在 W3C 草案中,File 对象只包含文件名,文件类型,文件大小等只读属性;FileReader用于内容读取和监控读取状态对于File以及FileReader类对象的函数和他们的属性可以通过创建一个对象然后console.log(这个对象)来查看他们的属性以及函数所包含的内容*/  var $file = $input[0].files[0];//得到文件对象var $Reader = new FileReader();//创建FileReader对象var $imgSrc = null;$Reader.readAsDataURL($file);//读取文件到FileReader对象$Reader.onload = function(){    $imgSrc = $Reader.result;//得到base64解码的图片信息 ,此可以用来显示成图片};


由上述代码得到的是对本地图片的base64编码显示,那么如此我们便可以解决一个问题,那边是不需要再用.swf以及iframe进行无刷新图片上传操作,我们可以直接用$.ajax将base64编码发给后台,然后再后台通过如下代码保存图片到服务器中,其中去掉数据的头data:image/jpeg;base64,.(此处上传的是.jpg文件的图片,所以为了能够上传所有的文件,需要进行分类检查),然后进行base64解码操作,然后保存到文件中

<?phpheader("content-type:image/jpeg");$img = $_POST["img"];$img = str_replace("data:image/jpeg;base64,",'', $img);$file = uniqid().".jpg";file_put_contents($file, base64_decode($img));?>


           

给我老师的人工智能教程打call!http://blog.csdn.net/jiangjunshow

这里写图片描述

猜你喜欢

转载自blog.csdn.net/qq_43679771/article/details/84033349