解决上传图片预览时获取绝对路径问题

最新推荐文章于 2022-10-31 21:15:41 发布

冼cong

最新推荐文章于 2022-10-31 21:15:41 发布

阅读量1.4k

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/xc921029/article/details/72639634

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

解决file选择文件后无法获取其绝对路径生成缩略图的问题

<!DOCTYPE html>

<html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
<title>测试</title>
</head>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>

<body>
<form action="#" οnsubmit="return check()">
<div id="d" style="width: 100px;height: 100px;background-color: red;">
我就是那个加号
</div>
<div id="in">
<input type="file" id="f0" style="display: none;" />
</div>
<div id="show"></div>
<input type="submit" />
</form>
</body>

</html>
<script type="text/javascript">
var i = 0;
$("#d").click(function() {
if(i>=2){
return false;
}

$("#f" + i).trigger("click");

$("#show").append("<img src='' id='img" + i + "' style='max-width:100px;max-height:100px' />")
get(i);
i++;
$("#in").append("<input type='file' id='f" + i + "' hidden='hidden' />")
});

function get(j) {
$("#f" + j).on("change", function() {
var $file = $(this);
var fileObj = $file[0];

var windowURL = window.URL || window.webkitURL;
var dataURL;
var $img = $("#img" + j);
if(fileObj && fileObj.files && fileObj.files[0]) {
dataURL = windowURL.createObjectURL(fileObj.files[0]);
$img.attr('src', dataURL);
} else {
dataURL = $file.val();
var imgObj = document.getElementById("img" + j);
imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;

}
return dataURL;
});
};
function check(){
return true;
}
</script>