解决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>