js如何实现只预览不下载文件，以图片为例
工具/原料
电脑
HBuilderX
方法/步骤
1、第一步、使用鼠标点击打开HBuilderX软件，如图所示：
2、第二步、然后点击菜单栏文件-->新建-->项目，如图所示：
3、第三步、输入项目名称，然后选中基本的html项目，再点击创建按钮，如图所示：
4、第四步、然后在html文件中键入代码：第一种方法：代码：<!DOCTYPEhtml争犸禀淫><html>惺绅寨瞀<head><title>js如何实现只预览不下载文件？1</title><script>functionsetImagePreview(avalue){vardocObj=document.getElementById("doc");varimgObjPreview=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();varimgSrc=document.selection.createRange().text;varlocalImagId=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("您上传的图片格式不正确，请重新选择!");returnfalse;}imgObjPreview.style.display='none';document.selection.empty();}returntrue;}</script></head><body>第一种方法：<tablewidth="100%"border="0"cellspacing="0"cellpadding="0"><tbody><tr><tdheight="101"align="center"><divid="localImag"><imgid="preview"src=""width="150"height="180"style="display:block;width:150px;height:180px;"></div></td></tr><tr><tdalign="center"style="padding-top:10px;"><inputtype="file"name="file"id="doc"style="width:150px;"onchange="javascript:setImagePreview();"></td></tr></tbody></table> <br></body></html>
5、第二种方法代码：<!DOCTYPEhtml><html> <挢旗扦渌;head> <罪焐芡拂metacharset="utf-8"> <title>js如何实现只预览不下载文件？3</title> </head> <body> 第二种方法： <inputid="file"type="file"> <imgid="img"alt=""> <script> varfile=document.getElementById('file') varimg=document.getElementById('img') file.addEventListener('change',function(){ varobj=file.files[0] varreader=newFileReader(); reader.readAsDataURL(obj); reader.onloadend=function(){ img.setAttribute('src',reader.result); } }) </script> </body></html>
6、第三种方法代码：<!DOCTYPEhtml><html> <挢旗扦渌;head> <罪焐芡拂metacharset="utf-8"> <title>js如何实现只预览不下载文件？2</title> </head> <body> 第三中方法： <inputid="file"type="file"> <imgid="img"alt=""> <script> varfile=document.getElementById('file') varimg=document.getElementById('img') file.addEventListener('change',function(){ varobj=file.files[0] varsrc=window.URL.createObjectURL(obj) img.setAttribute('src',src); }) </script> </body></html>
7、第五步、然后点击运行-->浏览器运行，如图所示：
8、第六步、在浏览器查看运行结果，然后点击选择文件按钮，如图所示：
9、第七步、然后选中需要预览的图片，点击打开按钮，如图所示：
10、第八步、点击打开按钮之后，即可查看预览效果，如图所示：
11、第二个方法和第三个方法，重复以上运行操作即可，效果如图所示：
