js如何实现只预览不下载文件
1、第一步、使用鼠标点击打开HBuilderX软件，如图所示：
2、第二步、然后点击菜单栏文件-->新建-->项目，如图所示：
3、第三步、输入项目名称，然后选中基本的html项目，再点击创建按钮，如图所示：
4、第四步、然后在html文件中键入代码：
第一种方法：代码：
<!DOCTYPE html>
<html>
<head>
<title>js如何实现只预览不下载文件？1</title>
<script>
function setImagePreview(avalue) {
var docObj = document.getElementById("doc");
var imgObjPreview = document.getElementById("preview");
if(docObj.files && docObj.files[0])
{
//火狐下，直接设img属性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '150px';
imgObjPreview.style.height = '180px';
//imgObjPreview.src = docObj.files[0].getAsDataURL();
//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
}
else
{
//IE下，使用滤镜
docObj.select();
var imgSrc = document.selection.createRange().text;
var localImagId = document.getElementById("localImag"); //必须设置初始大小
localImagId.style.width = "150px";
localImagId.style.height = "180px"; //图片异常的捕捉，防止用户修改后缀来伪造图片
try {
localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
} catch(e) {
alert("您上传的图片格式不正确，请重新选择!");
return false;
}
imgObjPreview.style.display = 'none';
document.selection.empty();
}
return true;
}
</script>
</head>
<body>
第一种方法：
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="101" align="center">
<div id="localImag"><img id="preview" src="
</td>
</tr>
<tr>
<td align="center" style="padding-top:10px;"><input type="file" name="file" id="doc" style="width:150px;" onchange="javascript:setImagePreview();"></td>
</tr>
</tbody>
</table>
<br>
</body>
</html>
5、第二种方法代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js如何实现只预览不下载文件？3</title>
</head>
<body>
第二种方法：
<input id="file" type="file">
<img id="img" alt="">
<script>
var file = document.getElementById('file')
var img = document.getElementById('img')
file.addEventListener('change',function(){
var obj = file.files[0]
var reader = new FileReader();
reader.readAsDataURL(obj);
reader.onloadend = function() {
img.setAttribute('src',reader.result);
}
})
</script>
</body>
</html>
6、第三种方法代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js如何实现只预览不下载文件？2</title>
</head>
<body>
第三中方法：
<input id="file" type="file">
<img id="img" alt="">
<script>
var file = document.getElementById('file')
var img = document.getElementById('img')
file.addEventListener('change',function(){
var obj = file.files[0]
var src = window.URL.createObjectURL(obj)
img.setAttribute('src',src);
})
</script>
</body>
</html>
7、第五步、然后点击运行-->浏览器运行，如图所示：
8、第六步、在浏览器查看运行结果，然后点击选择文件按钮，如图所示：
9、第七步、然后选中需要预览的图片，点击打开按钮，如图所示：
10、第八步、点击打开按钮之后，即可查看预览效果，如图所示：
11、第二个方法和第三个方法，重复以上运行操作即可，效果如图所示：
