这篇文章主要通过代码分析javascript实现图片上传前台页面,废话不多说了,直接贴代码了。
代码示例一:
<script> //检查图片的格式是否正确,同时实现预览 function setImagePreview(obj, localImagId, imgObjPreview) { var array = new Array('gif', 'jpeg', 'png', 'jpg', 'bmp'); //可以上传的文件类型 if (obj.value == '') { $.messager.alert("提示", "让选择要上传的图片!"); flag = false; return false; } else { var fileContentType = obj.value.match(/^(.*)(\.)(.{1,8})$/)[3]; //这个文件类型正则很有用 ////布尔型变量 var isExists = false; var objValue = obj.value; try { //对于IE判断要上传的文件的大小 var fso = new ActiveXObject("Scripting.FileSystemObject"); fileLenth = parseInt(fso.getFile(objValue).size); } catch (e) { try { //对于非IE获得要上传文件的大小 fileLenth = parseInt(obj.files[0].size); } catch (e) { flag = false; return false; } } //循环判断图片的格式是否正确 for (var i in array) { if (fileContentType.toLowerCase() == array[i].toLowerCase()) { //图片格式正确之后,根据浏览器的不同设置图片的大小 if (obj.files && obj.files[0]) { //火狐下,直接设img属性 imgObjPreview.style.display = 'block'; imgObjPreview.style.width = '180px'; imgObjPreview.style.height = '200px'; //火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式 imgObjPreview.src = window.URL.createObjectURL(obj.files[0]); if (fileLenth > 102400) { $.messager.alert("提示", "请选择小于100k的图片!"); flag = false; return false; } } else { //IE下,使用滤镜 obj.select(); var imgSrc = document.selection.createRange().text; //必须设置初始大小 localImagId.style.width = "180px"; localImagId.style.height = "200px"; //图片异常的捕捉,防止用户修改后缀来伪造图片 try { localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)"; localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc; } catch (e) { $.messager.alert("提示", "您上传的图片格式不正确,请重新选择!"); flag = false; return false; } imgObjPreview.style.display = 'none'; document.selection.empty(); } isExists = true; flag = true; return true; } } if (isExists == false) { $.messager.alert("提示", "上传图片类型不正确!"); flag = false; return false; } flag = false; return false; } } </script> <tr class="detailInfo"> <td align="right"> 上传照片: </td> <td align="left" > <input type="file" id="idFile" name="idFile" width="150px" runat="server" onchange="javascript:setImagePreview(this,localImag,preview);" /> </td> </tr> <tr class="detailInfo"> <td align="right"> 预 览: </td> <td> <div id="localImag"> <img id="preview" alt="预览图片" src="/UploadFiles/2021-04-02/userphoto.jpg">代码示例二:
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>ImageDialog Examples</title> <link rel="stylesheet" href="../themes/default/default.css" /> <script src="/UploadFiles/2021-04-02/kindeditor.js">当点击选择图片时加载该js。然后复制imageDialog,在image.js查找它,会发现里面跟这差不多的东西。这时就应该懂了,upload_json.jsp设置url,title,width,height,order,align,前台就可以使用了。
以上是本文对javascript实现图片上传前台页面的全部内容,希望大家喜欢。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年09月21日
2024年09月21日
- 群星《顶级发烧大碟 蒙面歌王争霸战 2CD》[WAV/分轨][1.3GB]
- 群星.2009-原班情歌2CD【SONY】【WAV+CUE】
- 群星.2024-长乐曲电视剧原声带【TME影音】【FLAC分轨】
- 群星.1993-烧得厉害VOL.1好戏好歌唱不停【滚石】【WAV+CUE】
- 魔兽世界wlk阿奴巴拉克怎么打 wlk阿奴巴拉克机制与打法
- 归龙潮阿律的笛子位置在哪 阿律的笛子图文位置一览
- 归龙潮中浦城区福鼠位置在哪 中浦城区福鼠收集位置大全
- NewViennaOctetViennaWindSoloists-TheDeccaRecordings(2024)18CD[24-48][FLAC]-9
- MatteoPasqualini-JohannSebastianBachItalienischesKonzertFranzsischeOuvertureVierDue
- 【雨果唱片】陈百强《梦里人LPCD45》2012[WAV+CUE]
- 《黑神话》纪录片9月20日上线!揭秘关卡为何删减
- 游戏科学估值已和育碧市值相当:后者有两万多名员工
- 黑神话第81周目Boss伤害有多恐怖?起手伤害直接秒
- 群星.2009-原班情歌2CD【SONY】【WAV+CUE】
- 群星.2024-长乐曲电视剧原声带【TME影音】【FLAC分轨】