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="" width="150" height="180" style="display: block; width: 150px; height: 180px;"></div> </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、第二个方法和第三个方法，重复以上运行操作即可，效果如图所示：
