三种方式,前面两种直接在本地预览图片,第三种方式需要通过服务器来获取图片
但存在兼容性问题,不兼容ie8
下面分别是html,js和php的内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <form> <input type="file" name="icon"> <img src="" alt=""> </form> </body> </html>
js部分
// 预览图片的三种方法 // 方法一:创建url连接 // input标签改变时触发事件,querySelector是h5c3出的属性选择器 document.querySelector("input[type=file]").onchange = function(){ // 获取文件对象 var file =this.files[0]; // 创建文件链接 var url = URL.createObjectURL(file); // 将路径赋值给img标签 document.querySelector("img").src=url; } // 方法二:解析文件转码为base64 // input标签改变时触发事件 document.querySelector("input[type=file]").onchange = function(){ // 获取文件对象 var file =this.files[0]; // 创建读取对象 var reader = new FileReader(); // 解析文件对象 reader.readAsDataURL(file); // 解析完成,回调函数 reader.onload = function (){ // 将文件对象解析成base64编码 var url = reader.result; // 将解析的数据结果赋值给img标签 document.querySelector("img").src=url; } } // 方法三:通过ajax将文件上传给后台php,后台保存文件,并生成路径,在回调函数中获取路径 document.querySelector("input[type=file]").onchange = function () { // xhr 2.0 配合form,发送图片文件 var sendDate = new FormData(document.querySelector("form")); // ajax发送文件 // 创建请求对象 var xhr = new XMLHttpRequest(); // 请求行 xhr.open("post","xxx.php"); // 回调函数 xhr.onload = function() { // json格式转成普通格式 var backData = JSON.parse(xhr.responseText); // 将解析的数据结果赋值给img标签 document.querySelector("img").src="./img/"+backData.name; } // 发送请求主体 xhr.send(sendDate); }
php内容
<?php
header("Access-Control-Allow-Origin:*");
// icon是input标签的name,将文件保存根目录
//由于window的字符集编码默认是gbk,而html和php的字符集编码默认是utf-8,因此存文件需要转码
$name = $_FILES["icon"]["name"];
$name = iconv("utf-8","gbk",$name);
move_uploaded_file($_FILES["icon"]["tmp_name"],"./img/".$name);
// 这个name是utf-8编码的
$name = $_FILES["icon"]["name"];
echo json_encode(array(
"name" => $name
))
?>