1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | 一、上传并显示<br><br>HTML <div id= "swf" style= "margin: 0 auto;text-align: center;" > <img src= "/assets/img/default.jpg" height= "180px" width= "180px" id= "logoshow" > </div> <div id= "headview" style= "text-align: center;margin: 0 auto;" > <input type= "file" id= "logo" name= "logo" style= "width: 180px;" onchange= "previewImage(this)" > </div> JS function previewImage(file){ var div = document.getElementById( 'swf' ); if (file.files && file.files[0]) { //HTML5 var img = document.getElementById( 'logoshow' ); var reader = new FileReader(); reader.readAsDataURL(file.files[0]); reader.onload = function (evt) { img.src = evt.target.result; img.style.width= "180px" ; }; } else //兼容IE,滤镜 { alert( "filter" ); var sFilter = 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="' ; file. select (); file.blur(); var src = document.selection.createRange().text; var img = document.getElementById( 'logoshow' ); img.filters.item( 'DXImageTransform.Microsoft.AlphaImageLoader' ).src = src; div.innerHTML = "<img id=logoshow style='margin:0px auto;width:180px;height:180px;" + sFilter + src + "\"'>" ; } } |
二、判断大小,IE10才有file功能
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | JS判断文件大小 <input id= "file" type= "file" onchange= "filefujianChange(document.getElementById('file'))" > <script type= "text/javascript" > function filefujianChange(target) { var fileSize = 0; if (!target.files) { var filePath = target.value; var fileSystem = new ActiveXObject( "Scripting.FileSystemObject" ); var file = fileSystem.GetFile (filePath); fileSize = file.Size; } else { fileSize = target.files[0].size; } var size = fileSize / 1024; alert(size); if (size>2000){ alert( "附件不能大于2M" ); target.value= "" ; return } var name=target.value; var fileName = name.substring(name.lastIndexOf( "." )+1).toLowerCase(); alert(fileName); if (fileName != "jpg" && fileName != "jpeg" && fileName != "pdf" && fileName != "png" && fileName != "dwg" && fileName != "gif" ){ alert( "请选择图片格式文件上传(jpg,png,gif,dwg,pdf,gif等)!" ); target.value= "" ; return ; } } </script> |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源!
· 周边上新:园子的第一款马克杯温暖上架
2011-12-15 【转】什么是程序集?