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解码操作，然后保存到文件中

header("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