01<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02 <html xmlns="http://www.w3.org/1999/xhtml" >
03
04
05 <head>
06 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
07 <title>图片上传本地预览</title>
08 <style type="text/css">
09 #preview{width:260px;height:190px;border:1px solid #000;overflow:hidden;}
10 #imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}
11 </style>
12 <script type="text/javascript">
13
14
15 //图片上传预览 IE是用了滤镜。
16 function previewImage(file)
17 {
18 var MAXWIDTH = 260;
19 var MAXHEIGHT = 180;
20 var div = document.getElementById('preview');
21 if (file.files && file.files[0])
22 {
23 div.innerHTML ='<img id=imghead>';
24 var img = document.getElementById('imghead');
25 img.onload = function(){
26 var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
27 img.width = rect.width;
28 img.height = rect.height;
29 // img.style.marginLeft = rect.left+'px';
30 img.style.marginTop = rect.top+'px';
31 }
32 var reader = new FileReader();
33 reader.onload = function(evt){img.src = evt.target.result;}
34 reader.readAsDataURL(file.files[0]);
35 }
36 else //兼容IE
37 {
38 var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
39 file.select();
40 var src = document.selection.createRange().text;
41 div.innerHTML = '<img id=imghead>';
42 var img = document.getElementById('imghead');
43 img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
44 var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
45 status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
46 div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
47 }
48 }
49 function clacImgZoomParam( maxWidth, maxHeight, width, height ){
50 var param = {top:0, left:0, width:width, height:height};
51 if( width>maxWidth || height>maxHeight )
52 {
53 rateWidth = width / maxWidth;
54 rateHeight = height / maxHeight;
55
56 if( rateWidth > rateHeight )
57 {
58 param.width = maxWidth;
59 param.height = Math.round(height / rateWidth);
60 }else
61 {
62 param.width = Math.round(width / rateHeight);
63 param.height = maxHeight;
64 }
65 }
66
67 param.left = Math.round((maxWidth - param.width) / 2);
68 param.top = Math.round((maxHeight - param.height) / 2);
69 return param;
70 }
71 </script>
72 </head>
73 <body>
74 <div id="preview">
75 <img id="imghead" style="display:none;" width=100 height=100 border=0 src='<%=request.getContextPath()%>/images/defaul.jpg'>
76 </div>
77
78
79 <input type="file" onchange="previewImage(this)" />
80 </body>
81 </html>
分享到：
相关推荐
在ASP.NET中实现图片上传及时预览是一项常见的需求，它能提供用户友好的交互体验，让用户在上传图片后能够即时查看效果。以下是对这个主题的详细解析。 首先，我们需要了解ASP.NET的基本架构。ASP.NET是Microsoft...
js图片上传图片及时预览效果，支持各种浏览器！
接下来，我们需要使用JavaScript（通常是jQuery或原生JS）来监听文件选择事件，并读取所选的图片。在用户选择文件后，`change` 事件会被触发。我们可以这样编写JavaScript代码： ```javascript document....
素材描述：PHP+plupload.full.min.js实现常用的多图片上传及时预览功能，点击上传的图片可立即删除。 logo.png可替换成其他想要的图片作为上传按钮 具体效果看演示，详细代码结构可查看附件
通过本文的介绍，你应该已经掌握了如何使用FileReader类来实现文件上传及时预览的基本方法。随着技术的不断发展，前端开发人员应当紧跟技术趋势，掌握更多像FileReader这样的现代Web API，从而提升开发效率并优化...
这一功能通常使用JavaScript库如Cropper.js来实现。 5. **拖放上传：** 遵循HTML5的拖放API，ThroUi允许用户直接从桌面或其他应用程序拖放图片到上传区域，提升了交互性。 6. **错误处理与反馈：** 当上传失败时，...
- 图片压缩：为了减少服务器存储空间和提高上传速度，前端可以对图片进行压缩，如使用JavaScript库如`img-compress`。 2. **后端接收与处理**： - 接收请求：后端服务器（如Node.js、Python Flask/Django、Java ...
在Web开发中，用户上传图片后需要预览图片是一个常见需求。传统的图片上传预览是在文件上传到服务器后，服务器返回图片地址，然后在浏览器中显示预览。但这样做存在一些问题，例如网络速度慢时用户体验不佳，服务器...
本组件利用jQuery库和layer.js弹层插件，实现了一种高效、易用的多张图片同时上传功能，提供了良好的用户交互体验。 **jQuery库** jQuery是一款广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及...
可以使用JavaScript库如`image-compressor.js`或`compressorjs`来实现图片的质量和尺寸压缩。 5. **跨域资源共享（CORS）**：如果图片上传到不同的域名，需要确保服务器支持CORS，以允许跨域HTTP请求。 6. **...
"图片上传前显示"这个功能旨在提供用户在正式提交图片到服务器之前预览图片的效果，以确认图片质量、方向或内容是否符合预期。这在用户体验上是非常重要的，因为它允许用户在上传前检查图片，避免因误传或格式不正确...
利用HTML5的File API，zyUpload能实现本地文件预览，用户在上传前可以预览图片，确认无误后再提交，减少了因误传带来的不便。此外，HTML5的拖放功能也使得图片上传变得更加直观和便捷。 6. **应用场景** 这款插件...
项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传，可轻松copy复刻，拿到资料包后可轻松复现出一样的项目，本人系统开发经验充足（全栈开发），有任何使用问题欢迎随时与我联系，我会及时为您解惑，...
"模仿163js多文件上传"是一个旨在实现类似网易163邮箱的多文件上传功能的JavaScript解决方案，它支持与服务器端如ASP、JSP、PHP等技术的交互，为用户提供便捷的批量上传体验。 首先，我们来详细解释这个功能的核心...
总之，仿58网、赶集网和百姓网的SWFUpload图片上传效果的实现，需要结合JavaScript、Flash和后端技术，实现多文件选择、预览、上传和文件路径获取等一系列功能。通过不断优化和改进，可以创建一个高效且用户友好的...
2. 图片预览：选取图片后，显示预览图，让用户确认上传的图片。 3. 图片剪切：引入jQuery ImgCrop库，提供一个可交互的剪切区域，用户可以自由调整剪切范围。 4. 图片处理：前端将剪切参数和原始图片一起发送到...
3. **Ajax上传图片**: 使用Ajax（Asynchronous JavaScript and XML）技术，可以在后台异步上传图片，这意味着用户无需等待整个文件上传完成就可以继续浏览网页，提高了用户体验。结合XMLHttpRequest2对象，可以实现...