缩略图片

==========================点击链接部分=============================================================
<script type="text/javascript">
window.onload = function(){
 maxwidth = 400
 IMGOBJ = document.getElementsByName("imgautowidth");
 if(IMGOBJ && IMGOBJ.length){
  for(i = 0; i<IMGOBJ.length; i++){
   IMGOBJ[i].style.display = "";
   if(IMGOBJ[i].width > maxwidth){
    IMGOBJ[i].width = maxwidth
   }
  }
 }
}

function showimg(img){
 var newimg = new IMGINFO(img.src); 
 window.open('Show_AlbumImg.aspx?imgurl='+img.src,'screenshot','width='+ newimg.w +',height='+ newimg.h +',top=0,left=0,scrollbars=no,toolbars=no')
 //window.open('/imgview.asp?imgurl='+img.src,'screenshot','width='+ newimg.w +',height='+ newimg.h +',top=0,left=0,scrollbars=no,toolbars=no')
}
var IMG_PV;
function IMGINFO(url) {
 IMG_PV = new Image();
 IMG_PV.src = url;
 this.w = IMG_PV.width;
 this.h = IMG_PV.height;
}
</script>

<div style="overflow:hidden; text-align:center; width:400px;"><img src='<%# DataBinder.Eval(Container.DataItem, "albumimg_imgurl")%>' style="cursor:pointer;" name="imgautowidth" onClick="showimg(this)"/></div>
===========================显示部分=============================================================
<script language="JavaScript1.2" type="text/JavaScript">
var ie=document.all;
var nn6=document.getElementById&&!document.all;
var isdrag=false;
var x,y;
var dobj;

function movemouse(e) {
 if (isdrag) {
  dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
  dobj.style.top  = nn6 ? ty + e.clientY - y : ty + event.clientY - y;
  return false;
 }
}
function selectmouse(e) {
 var fobj      = nn6 ? e.target : event.srcElement;
 var topelement = nn6 ? 'HTML' : 'BODY';

 while (fobj.tagName != topelement && fobj.className != 'drag') {
  fobj = nn6 ? fobj.parentNode : fobj.parentElement;
 }
 if (fobj.className=='drag') {
  isdrag = true;
  dobj = fobj;
  tx = parseInt(dobj.style.left+0);
  ty = parseInt(dobj.style.top+0);
  x = nn6 ? e.clientX : event.clientX;
  y = nn6 ? e.clientY : event.clientY;
  document.onmousemove=movemouse;
  return false;
 }
}
document.onmousedown=selectmouse;
document.onmouseup=new Function('isdrag=false');
</script>
   
<style>
.drag {
 position: relative;
 cursor: move;
}

body {
 background-color: #C0C0C0;
}
</style>
</head>
<%--<body style="margin:0;padding:0" bgcolor="#F0F0F0" ondragstart="return true" onselectstart="return true">--%>
<body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0" oncontextmenu="return false" ondragstart="return false">
    <img src="<%=_imgurl%>" onDblClick="window.close();" class="drag">
    <%--<img id="preview_img" src='<%=_imgurl%>'  style="cursor:pointer" onclick="window.close();" width="420";  onload="resizeImage(this)" oncontextmenu="return false;" alt="点击关闭" />--%>
</body>
</html>

<think>我们正在使用HTMLJavaScript来实现文件上传并显示缩略图的功能。根据引用内容,我们可以参考以下步骤: 1. 使用HTML的input元素来创建文件选择控件,并设置类型为file。 2. 使用JavaScript监听文件选择事件,获取用户选择的文件。 3. 使用FileReader对象读取文件内容,并将其转换为Data URL(base64编码)或使用URL.createObjectURL()创建对象URL来显示缩略图。 4. 将读取到的图片数据(URL)设置为img元素的src,从而显示缩略图。 同时,我们还可以参考引用[1]和引用[2]中提到的内容,注意以下几点: - 文件格式校验:允许上传的图片格式(如jpg, jpeg, png)。 - 限制上传数量(如果需要)。 - 提供删除和预览功能。 下面我们将逐步实现一个简单的示例,包括文件选择、格式校验、缩略图显示和删除功能。 步骤: 1. 创建HTML结构:包含文件输入、缩略图显示区域。 2. 编写JavaScript代码: a. 监听文件输入的变化(change事件)。 b. 获取选中的文件,进行格式校验。 c. 读取文件并生成缩略图(使用URL.createObjectURL,因为它更高效,不需要base64编码那么长的字符串)。 d. 将缩略图添加到页面中,并为每个缩略图添加删除按钮。 e. 实现删除功能:移除缩略图元素,并释放对象URL。 注意:为了安全起见,我们只处理图片文件,并校验其格式。 参考引用[3]中的示例,我们可以使用以下方式创建对象URL并显示缩略图。 代码实现如下:</think>### 在网页中实现文件上传并显示缩略图 以下是使用 HTMLJavaScript 实现文件上传并显示缩略图的完整解决方案: ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>文件上传与缩略图展示</title> <style> .upload-container { margin: 20px; padding: 20px; border: 2px dashed #ccc; border-radius: 8px; text-align: center; } .thumbnail-container { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 20px; } .thumbnail-item { position: relative; width: 150px; height: 150px; border: 1px solid #ddd; border-radius: 4px; overflow: hidden; } .thumbnail { width: 100%; height: 100%; object-fit: cover; } .delete-btn { position: absolute; top: 5px; right: 5px; background: rgba(255,0,0,0.7); color: white; border: none; border-radius: 50%; width: 24px; height: 24px; cursor: pointer; } .preview-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); display: flex; justify-content: center; align-items: center; z-index: 1000; display: none; } .preview-image { max-width: 80%; max-height: 80%; } .close-btn { position: absolute; top: 20px; right: 20px; color: white; font-size: 30px; cursor: pointer; } </style> </head> <body> <div class="upload-container"> <input type="file" id="fileInput" accept="image/jpeg, image/png, image/jpg" multiple> <div class="thumbnail-container" id="thumbnailContainer"></div> </div> <div class="preview-container" id="previewContainer"> <span class="close-btn" id="closePreview">×</span> <img class="preview-image" id="previewImage"> </div> <script> // 获取DOM元素 const fileInput = document.getElementById('fileInput'); const thumbnailContainer = document.getElementById('thumbnailContainer'); const previewContainer = document.getElementById('previewContainer'); const previewImage = document.getElementById('previewImage'); const closePreview = document.getElementById('closePreview'); // 允许的文件类型 const validTypes = ['image/jpeg', 'image/png', 'image/jpg']; // 文件选择事件处理 fileInput.addEventListener('change', function(e) { const files = Array.from(e.target.files); files.forEach(file => { // 文件类型验证 if (!validTypes.includes(file.type)) { alert('只支持 JPG/JPEG/PNG 格式的图片'); return; } // 创建缩略图 createThumbnail(file); }); }); // 创建缩略function createThumbnail(file) { const reader = new FileReader(); reader.onload = function(e) { // 创建缩略图元素 const thumbnailItem = document.createElement('div'); thumbnailItem.className = 'thumbnail-item'; const img = document.createElement('img'); img.className = 'thumbnail'; img.src = e.target.result; img.dataset.src = e.target.result; // 存储原始数据用于预览 // 创建删除按钮 const deleteBtn = document.createElement('button'); deleteBtn.className = 'delete-btn'; deleteBtn.innerHTML = '×'; deleteBtn.onclick = function() { thumbnailItem.remove(); updateFileInput(); }; // 预览功能 img.onclick = function() { previewImage.src = this.dataset.src; previewContainer.style.display = 'flex'; }; // 组合元素 thumbnailItem.appendChild(img); thumbnailItem.appendChild(deleteBtn); thumbnailContainer.appendChild(thumbnailItem); }; reader.readAsDataURL(file); } // 更新文件输入(删除文件后) function updateFileInput() { // 实际项目中可能需要更新FormData console.log('文件列表已更新'); } // 关闭预览 closePreview.onclick = function() { previewContainer.style.display = 'none'; }; // 点击背景关闭预览 previewContainer.onclick = function(e) { if (e.target === previewContainer) { previewContainer.style.display = 'none'; } }; </script> </body> </html> ``` ### 功能说明 1. **文件上传** - 使用 `<input type="file">` 获取文件 - `accept="image/jpeg, image/png, image/jpg"` 限制图片格式 - `multiple` 属性支持多文件选择 2. **缩略图显示** - 使用 `FileReader` API 读取文件内容 - 通过 `readAsDataURL()` 获取 Base64 编码的图片数据 - 动态创建 `<img>` 元素显示缩略图 3. **文件验证** - 检查文件 MIME 类型 (`image/jpeg`, `image/png`) - 无效格式显示错误提示 4. **交互功能** - 删除按钮:移除缩略图及对应文件 - 点击缩略图查看大图预览 - 预览窗口点击关闭或背景关闭 5. **响应式设计** - 缩略图网格布局自适应容器宽度 - 预览图片适应不同屏幕尺寸 ### 技术要点 1. **File API 使用** - `FileReader` 读取文件内容 - `readAsDataURL()` 获取 Base64 数据 - 通过 `URL.createObjectURL()` 也可实现(需手动释放内存) 2. **DOM 操作** - 动态创建/删除缩略图元素 - 事件委托处理交互 3. **用户体验优化** - 拖拽区域可视化 - 图片预览交互 - 即时错误反馈 4. **性能考虑** - 使用 `object-fit: cover` 保持缩略图比例 - 预览时加载原始图片数据 - 及时释放不再需要的对象 URL 此实现完全基于原生 JavaScript,无需外部库,兼容现代浏览器。对于需要后端集成的场景,可使用 FormData 对象配合 Fetch API 或 XMLHttpRequest 发送文件数据[^1][^3]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值