上传图片预览JS脚本 Input file图片预览的实现示例

最新推荐文章于 2023-05-15 17:18:35 发布
最新推荐文章于 2023-05-15 17:18:35 发布
阅读量408 收藏
点赞数
  1. <span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>By：DragonDean</title>  
  6. <script type="text/javascript">  
  7. //下面用于图片上传预览功能  
  8. function setImagePreview(avalue) {  
  9. var docObj=document.getElementById("doc");  
  10.    
  11. var imgObjPreview=document.getElementById("preview");  
  12. if(docObj.files &&docObj.files[0])  
  13. {  
  14. //火狐下，直接设img属性  
  15. imgObjPreview.style.display = 'block';  
  16. imgObjPreview.style.width = '100px';  
  17. imgObjPreview.style.height = '100px';   
  18. //imgObjPreview.src = docObj.files[0].getAsDataURL();  
  19.    
  20. //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式  
  21. imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);  
  22. }  
  23. else  
  24. {  
  25. //IE下，使用滤镜  
  26. docObj.select();  
  27. var imgSrc = document.selection.createRange().text;  
  28. var localImagId = document.getElementById("localImag");  
  29. //必须设置初始大小  
  30. localImagId.style.width = "100px";  
  31. localImagId.style.height = "100px";  
  32. //图片异常的捕捉，防止用户修改后缀来伪造图片  
  33. try{  
  34. localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";  
  35. localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;  
  36. }  
  37. catch(e)  
  38. {  
  39. alert("您上传的图片格式不正确，请重新选择!");  
  40. return false;  
  41. }  
  42. imgObjPreview.style.display = 'none';  
  43. document.selection.empty();  
  44. }  
  45. return true;  
  46. }  
  47.    
  48. </script>  
  49. </head>  
  50.    
  51. <body>  
  52. <table width="100%" border="0" cellspacing="0" cellpadding="0">  
  53. <tbody>  
  54. <tr>  
  55. <td height="100" align="center">  
  56. <div id="localImag"><img id="preview" src="http://d7.yihaodianimg.com/N06/M03/15/4B/CgQIzVcN1kmAAW1GAAAnxemTUOQ36800.webp" width="100" height="100" style="display: block; width: 100px; height: 100px;"></div>  
  57. </td>  
  58. </tr>  
  59. <tr>  
  60. <td align="center" style="padding-top:10px;"><input type="file" name="file" id="doc" style="width:100px;" onchange="javascript:setImagePreview();"></td>  
  61. </tr>  
  62. </tbody>  
  63. </table>  
  64. </body>  
  65. </html></span>  
大啵鱼
关注
input file上传图片预览
12-30
input file上传图片预览
js input img图片预览
doutao6677的专栏
12-28 460
function preImg(sourceId, targetId) {       if (typeof FileReader === 'undefined') {           alert('Your browser does not support FileReader...');           return;       }       var reader = n
js input上传图片预览
陈万洲的专栏
11-18 2044
$(function(){ $("#pstimg").change(function(){ var file = this.files[0]; alert("文件大小:"+(file.size / 1024).toFixed(1)+"kB"); if (window.FileReader) { va
input标签file文件上传图片本地预览
weixin_30456039的博客
04-24 303
<input type="file" name="img-up" id="img-up" value="" /> 　　 $("#img-up").on("change",function () { if(this.files[0]){ getImgBase64Data(this.files[...
简单实现jQuery上传图片显示预览功能
10-19
标题“简单实现jQuery上传图片显示预览功能”和描述告诉我们，本文将介绍如何使用jQuery技术来实现一个图片上传功能，此功能可以让用户上传图片之后立即预览所选文件。此类功能在现代网页开发中十分常见，尤其适用于...
ie8本地图片上传预览示例代码
09-04
这段代码通过FileReader的`readAsDataURL`方法读取文件内容，当读取完成后，将生成的DataURL赋值给`<img>`元素的`src`属性，从而实现预览。 总结起来，IE8本地图片上传预览的关键在于使用滤镜和`<div>`元素来规避...
Ajax 上传图片并预览的简单实现
10-21
在示例中，使用了jQuery库文件和自定义的`upload.js`脚本来辅助实现图片上传和预览功能。`<script>`标签用于引入这两个文件，确保JavaScript代码能够在页面加载完成后执行。 知识点六：错误处理和异常捕获 在代码...
html 兼容ie 预览图片,input file本地图片预览的方法（兼容IE、Chrome和Firefox）
weixin_34221599的博客
06-05 261
input选择图片实现预览本地图片的方法，网上有很多，但是不能很好的兼容多种浏览器，这里找到一个兼容IE6、IE7、IE8和Chrome、firefox等浏览器的代码：本地图片预览#preview{width:100px;height:100px;border:1px solid #000;overflow:hidden;}#imghead {filter:progid:DXImageTransf...
javascript实现input file上传图片预览效果
11-23
本文实例介绍了javascript实现input file上传图片预览效果的详细代码，分享给大家供大家参考，具体内容如下 运行效果图： 具体实现代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> [removed][removed] <style type="text/css"> .imgbox,.imgbox1 { float: left; margin-right: 2
input-file的本地图片预览+等比例缩放
08-13
在对象容器边界内，在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable Network Graphics)格式，则0%-100%的透明度也被提供。
js的input标签上传图片并转为base64预览
博哥的二进制世界
05-15 1053
js的input标签上传图片并转为base64预览
JS input file图片上传预览效果
微微一芯的博客
04-21 1973
首先，可以先了解file 和FileReader 的API，在选取一个或者多个文件之后,访问到代表了所选文件的一个或多个File对象，这些对象被包含在一个FileList对象中。所有type属性(attribute)为file的元素都有一个files属性，用来存储用户所选择的文件。files有一个length属性和item方法，我们可以通过files[index]或者files.item(inde
js读取input[type=file]图片，并实时预览
freedom
07-10 8282
前言： 之前为了实现input[type=file]选择图片后实时展示图片，是把图片上传后，后端返回路径再显示 感觉多此一举，这样的方法实在太笨了，也太慢了，也就摸索出另一种方法FileReader 帮助文档 #html <input type="file" id="file"/> <img src="" id="img"/> <p id="text"&g...
[js实例] input type=file 上传图片预览 createObjectURL
我的米饭
03-01 2428
一直以来在网页中上传图片都使用的原始的 input type=file ，样子很丑，而且只能显示图片的名称，无法预览，今天自己动手写了一个组件，并美化了一下。样式的实现原理就是网上流行的隐藏input控件透明度opacity=0的办法，图片的预览实现原理使用了javascript里的createObjectURL方法。一、css 部分：.list { padding: 10px;} .list:af
js input file文件上传图片并展示。
热门推荐
Mb_tqy的博客
04-02 1万+
项目中需要实现上传图片并预览的效果这是一个Demo效果图。具体内容：1 页面HTML内容&lt;div class="imgContent"&gt; &lt;img id="imgContentImg" src="" alt=""&gt; &lt;input type="file" class="file" id="imgU
_Command_line_settings_desktop_wallpaper_tool,_Su_command-wallpa
最新发布
09-17
_Command_line_settings_desktop_wallpaper_tool,_Su_command-wallpaper
Python批量无损压缩图片脚本实现
"该资源提供了一个使用Python进行无损图片批量压缩的示例，主要依赖tinypng API来实现，可以保留图片原有的信息。" 在Python编程中，处理图像文件时，有时需要减小文件大小以节省存储空间，特别是在云盘空间有限的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值