前段时间在网络上找的代码，修改了一部分用在了项目里。原博客地址找不到了，如果原作者看到的话留言我，将于第一时间删除。
//js本地图片预览，兼容ie[6-9]、火狐、chrome17+、opera11+、maxthon3 function previewimage(fileobj) { //创建dom元素 var ppreviewid = 'ppreview_' + fileobj.name; var imgpreviewid = 'imgheadphoto_' + fileobj.name; var html='<p id="'+ppreviewid+'">'+ '<img id="'+imgpreviewid+'" src="images/moren.jpg" style="width: 120px; height: 120px; border: solid 1px #d2e2e2;" />'+ '</p>'; $('#'+ppreviewid).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) { $('#'+ppreviewid).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(ppreviewid + "new"); if (newpreview == null) { newpreview = document.createelement("p"); newpreview.setattribute("id", ppreviewid + "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 tempppreview = document.getelementbyid(ppreviewid); tempppreview.parentnode.insertbefore(newpreview, tempppreview); tempppreview.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 { $('#'+ppreviewid).remove(); alert("仅支持" + allowextention + "为后缀名的文件!"); fileobj.value = ""; //清空选中文件 if (browserversion.indexof("msie") > -1) { fileobj.select(); document.selection.clear(); } fileobj.outerhtml = fileobj.outerhtml; } return fileobj.value; //返回路径 }
【相关推荐】
1. javacript免费视频教程
2. 移动端手指放大缩小插件代码详解
3. bootstrap手风琴折叠的教程详解
4. bootstrap模态框远程实例详解
5. angularjs实现$http.post和$http.get请求的代码详解
以上就是js实现上传图片并且能够预览的实例详解的详细内容。