企业自己的网站,杭州专门做网站,网站制作怎么报价单,wordpress微信分享图片不显示js实现图片上传预览及进度条 原文js实现图片上传预览及进度条 最近在做图片上传的时候#xff0c;由于产品设计的比较fashion#xff0c;上网找了比较久还没有现成的#xff0c;因此自己做了一个#xff0c;实现的功能如下#xff1a; 1#xff1a;去除浏览器input … js实现图片上传预览及进度条 原文js实现图片上传预览及进度条 最近在做图片上传的时候由于产品设计的比较fashion上网找了比较久还没有现成的因此自己做了一个实现的功能如下 1去除浏览器input typefile默认的样式 2图片从本地选择后立即预览图片 3使用上传可以查看上传进度(本博做的是上传的百分比做成进度条类似) 先看效果图 做完的效果图如下 首先是去除浏览器默认上传图片框这个不是设置的css再者input typefile具有安全性的限制应该不是那么好操作的。这里使用的方法很简单设置input为隐藏再写个div,这个div标签的onclick事件触发input的onclick事件 input idlocalpic1 typefile styledisplay:nonediv idshowpic1 οnclickdocument.getElementById(localpic1).click(); data点击添加海报点击添加海报/div 这个比较简单下面看看图片的预览 图片的预览利用了input typefile的onchange事件当检测到图片替换的时候显示替换后的图片我这边是直接插入的img标签下面是布局 li font海报/font div classpic idshowpic1 οnclickdocument.getElementById(localpic1).click(); data点击添加海报 点击添加海报 /div div idshowpic1Name/div div idshowpic1Size/div div classinfo a idshowpic1Up styledisplay:none href# οnclickuploadFile(pic1)上传/a a idshowpic1Me styledisplay:none href#上传中/a a idshowpic1De href# styledisplay:none οnclickdeletePic(pic1)删除/a /div /li onchange事件获取图片的地址(value)好吧这个万恶的各种浏览器。然后获取图片的信息予以显示这个相对还是比较简单的聪明的小伙应该一下就明白。 input idlocallogo typefile οnchangepreviewImage(this,showlogo);
/**图片的操作*/function previewImage(fileObj,divPreviewId){var allowExtention.jpg,.bmp,.gif,.png;//允许上传文件的后缀名document.getElementById(hfAllowPicSuffix).value;var extentionfileObj.value.substring(fileObj.value.lastIndexOf(.)1).toLowerCase(); var browserVersion window.navigator.userAgent.toUpperCase();if(allowExtention.indexOf(extention)-1){ if(fileObj.files){//兼容chrome、火狐7、360浏览器5.5等应该也兼容ie10HTML5实现预览if(window.FileReader){var reader new FileReader(); reader.onload function(e){document.getElementById(divPreviewId).innerHTMLimg srce.target.result;} reader.readAsDataURL(fileObj.files[0]);}else if(browserVersion.indexOf(SAFARI)-1){alert(不支持Safari浏览器6.0以下版本的图片预览!);}}else if (browserVersion.indexOf(MSIE)-1){//ie、360低版本预览if(browserVersion.indexOf(MSIE 6)-1){//ie6document.getElementById(divPreviewId).innerHTMLimg srcfileObj.value;}else{//ie[7-9]fileObj.select();if(browserVersion.indexOf(MSIE 9)-1)fileObj.blur();//不加上document.selection.createRange().text在ie9会拒绝访问var newPreview document.getElementById(divPreviewIdNew);if(newPreviewnull){newPreview document.createElement(div);newPreview.setAttribute(id,divPreviewIdNew);newPreview.style.width 150px;newPreview.style.height 150px;newPreview.style.bordersolid 1px #d2e2e2;}newPreview.style.filterprogid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethodscale,src document.selection.createRange().text ); var tempDivPreviewdocument.getElementById(divPreviewId);tempDivPreview.parentNode.insertBefore(newPreview,tempDivPreview);tempDivPreview.style.displaynone; }}else if(browserVersion.indexOf(FIREFOX)-1){//firefoxvar firefoxVersion parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.])/)[1]);if(firefoxVersion7){//firefox7以下版本document.getElementById(divPreviewId).innerHTMLimg srcfileObj.files[0].getAsDataURL();}else{//firefox7.0 document.getElementById(divPreviewId).innerHTMLimg srcwindow.URL.createObjectURL(fileObj.files[0]);}}else{document.getElementById(divPreviewId).innerHTMLimg srcfileObj.value;} }else{alert(仅支持allowExtention为后缀名的文件!);fileObj.value;//清空选中文件if(browserVersion.indexOf(MSIE)-1){ fileObj.select();document.selection.clear();} fileObj.outerHTMLfileObj.outerHTML;}document.getElementById(divPreviewId).style.border;document.getElementById(divPreviewIdUp).style.displayblock;document.getElementById(divPreviewIdDe).style.displayblock;showFileInfo(fileObj.files[0],divPreviewId);}//获取图片的大小、名称予以显示这里还可以显示图片的文件类型function showFileInfo(file,divPreviewId) {var fileName file.name;var file_typename fileName.substring(fileName.lastIndexOf(.), fileName.length);if (file) {var fileSize 0;if (file.size 1024 * 1024){fileSize (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() MB;}else{fileSize (Math.round(file.size * 100 / 1024) / 100).toString() KB;}document.getElementById(divPreviewIdName).innerHTML 文件名: file.name;document.getElementById(divPreviewIdSize).innerHTML 图片大小: fileSize;document.getElementById(divPreviewIdName).style.displayblock;document.getElementById(divPreviewIdSize).style.displayblock;}} 最后一个进入条问题比较难以解决你要监听图片上传了多少。我觉得大部分人在这里会选择插件那样的话就不用自己管了但是如果有兴趣继续往下看吧I am glad to share my skill with you all! 当我用form解决不了用ajax解决不了的时候(我看ajax有人好像说能上传文件这个处理下应该是可以的)就想到了XMLHttpRequest()嘿嘿。 function uploadFile(fileId) {document.getElementById(showfileIdUp).style.displaynone;document.getElementById(showfileIdMe).style.displayblock;var fd new FormData();fd.append(file, document.getElementById(localfileId).files[0]);var xhr new XMLHttpRequest();//上传中设置上传的百分比xhr.upload.addEventListener(progress, function(evt){if (evt.lengthComputable) {var percentComplete Math.round(evt.loaded * 100 / evt.total);document.getElementById(showfileIdMe).innerHTML 上传中percentComplete%;}else {document.getElementById(showfileIdMe).innerHTML 无法计算;}}, false);//请求完成后执行的操作xhr.addEventListener(load, function(evt){var message evt.target.responseText,obj eval((message));if(obj.status 1){$(#fileId).val(obj.picName);document.getElementById(showfileIdMe).innerHTML 已上传;alert(上传成功!);}else{alert(obj.message);}}, false);//请求errorxhr.addEventListener(error, uploadFailed, false);//请求中断xhr.addEventListener(abort, uploadCanceled, false);//发送请求xhr.open(POST, ${ctx}/manage/file/File/uploadPic.htm);xhr.send(fd);}function uploadFailed(evt) {alert(上传出错.);}function uploadCanceled(evt) {alert(上传已由用户或浏览器取消删除连接.);} ok最后一个问题算是搞定了在firefoxie9,chrome下测试没有问题版本应该都不高其他的就不管了哈。 本人第一次发博各位大侠手下留情~ posted on 2014-01-10 13:14 NET未来之路 阅读(...) 评论(...) 编辑 收藏 转载于:https://www.cnblogs.com/lonelyxmas/p/3513554.html
