错误实例（fakepath路径）
<html>
<input type="file" id="recipient-name">
<script>
var file = $("#recipient-name"); //获取id值为...的file类型的表单
$(file).change(function() { //表单的内容完成后实现的方法
var fileToncet = $(this).val(); //获取表单的内容
console.log(fileToncet); //输出表单的内容 <img src="C:\fakepath\3.3.jpg"/>
var creatImg = '<img src="' + fileToncet + '"/>'; //生成一个图片标签，路径和为表单的内容（即路径）
var imgDiv = $('.div-img').append(creatImg); //将这个图片标签插入到指定位置,照片不显示
console.log(creatImg);//输出图片的路径 <img src="C:\fakepath\3.3.jpg"/>
浏览器为了安全问题，会自动更改图片的路径，所以此时图片的路径不是原路径，导致图片显示不出来
解决方法
<html>
<input type="file" id="recipient-name">
<script>
$("#recipient-name").change(function(e) { //监听input内容改变
var exSrc = e.target;
exGetImg(exSrc);
//调用获取图片信息的方法
})
var exGetImg = function(extag) {
var file = extag.files[0]; //选中文件的第一个文件（当成固定的格式）
var readers = new FileReader(); //新建文件阅读对象，来转意路径
readers.readAsDataURL(file); //将读取的文件路径，将路径转换为url类型
readers.onload = function() { //转换之后调用onload（）方法
var imgsSrc = this.result; //图片地址读出来之后result结果为 DataURL //this.result 为图片转化的url路径
console.log(imgsSrc) //显示出来图片的url路径，可以直接赋给img的src属性
var creatImg = '<img src="' + imgsSrc + '"/>'; //生成一个图片标签，路径和为表单的内容（即路径）
var imgDiv = $('.div-img').append(creatImg); //将这个图片标签插入到指定位置,照片显示。
}
}
3504
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
