JS实现上传图片实时预览功能
程序员文章站
2024-02-09 21:15:34
前段时间在网络上找的代码,修改了一部分用在了项目里。原博客地址找不到了,如果原作者看到的话留言我,将于第一时间删除。
//js本地图片预览,兼容ie[6-9]、火...
前段时间在网络上找的代码,修改了一部分用在了项目里。原博客地址找不到了,如果原作者看到的话留言我,将于第一时间删除。
//js本地图片预览,兼容ie[6-9]、火狐、chrome17+、opera11+、maxthon3 function previewimage(fileobj) { //创建dom元素 var divpreviewid = 'divpreview_' + fileobj.name; var imgpreviewid = 'imgheadphoto_' + fileobj.name; var html='<div id="'+divpreviewid+'">'+ '<img id="'+imgpreviewid+'" src="images/moren.jpg" style="width: 120px; height: 120px; border: solid 1px #d2e2e2;" />'+ '</div>'; $('#'+divpreviewid).remove(); $(fileobj).after(html); //进行限制 var allowextention = ".jpg,.bmp,.gif,.png"; //允许上传文件的后缀名document.getelementbyid("hfallowpicsuffix").value; var extention = fileobj.value.substring(fileobj.value.lastindexof(".") + 1).tolowercase(); var browserversion = window.navigator.useragent.touppercase(); if (allowextention.indexof(extention) > -1) { //格式正确 if (fileobj.files) { //html5实现预览,兼容chrome、火狐7+等 if (window.filereader) { var reader = new filereader(); reader.onload = function (e) { document.getelementbyid(imgpreviewid).setattribute("src", e.target.result); } reader.readasdataurl(fileobj.files[0]); } else if (browserversion.indexof("safari") > -1) { $('#'+divpreviewid).remove(); alert("不支持safari6.0以下浏览器的图片预览!"); } } else if (browserversion.indexof("msie") > -1) { if (browserversion.indexof("msie 6") > -1) {//ie6 document.getelementbyid(imgpreviewid).setattribute("src", fileobj.value); } else {//ie[7-9] fileobj.select(); if (browserversion.indexof("msie 9") > -1) fileobj.blur(); //不加上document.selection.createrange().text在ie9会拒绝访问 var newpreview = document.getelementbyid(divpreviewid + "new"); if (newpreview == null) { newpreview = document.createelement("div"); newpreview.setattribute("id", divpreviewid + "new"); newpreview.style.width = document.getelementbyid(imgpreviewid).width + "px"; newpreview.style.height = document.getelementbyid(imgpreviewid).height + "px"; newpreview.style.border = "solid 1px #d2e2e2"; } newpreview.style.filter = "progid:dximagetransform.microsoft.alphaimageloader(sizingmethod='scale',src='" + document.selection.createrange().text + "')"; var tempdivpreview = document.getelementbyid(divpreviewid); tempdivpreview.parentnode.insertbefore(newpreview, tempdivpreview); tempdivpreview.style.display = "none"; } } else if (browserversion.indexof("firefox") > -1) {//firefox var firefoxversion = parsefloat(browserversion.tolowercase().match(/firefox\/([\d.]+)/)[1]); if (firefoxversion < 7) {//firefox7以下版本 document.getelementbyid(imgpreviewid).setattribute("src", fileobj.files[0].getasdataurl()); } else {//firefox7.0+ document.getelementbyid(imgpreviewid).setattribute("src", window.url.createobjecturl(fileobj.files[0])); } } else { document.getelementbyid(imgpreviewid).setattribute("src", fileobj.value); } } else { $('#'+divpreviewid).remove(); alert("仅支持" + allowextention + "为后缀名的文件!"); fileobj.value = ""; //清空选中文件 if (browserversion.indexof("msie") > -1) { fileobj.select(); document.selection.clear(); } fileobj.outerhtml = fileobj.outerhtml; } return fileobj.value; //返回路径 }
以上所述是小编给大家介绍的js实现上传图片实时预览功能,希望对大家有所帮助