js读取图片以及AJAX上传图片注意事项-优快云博客

本文介绍了JavaScript读取图片并确保图片完全加载的注意事项，提供了使用Image对象onload事件来判断图片加载完成的方法，特别考虑了IE浏览器的兼容性。通过获取图片的base64编码，实现了AJAX无刷新上传图片，详细阐述了如何将base64编码发送到后台并保存到服务器的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

这里，我提供一个我自己写的经常用的一个函数模板吧，其实不是什么函数模板，只是经常这么写而已，对此，我希望读者可以去看看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解码操作，然后保存到文件中

<?php
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));
?>