用javascript實現圖片上傳並預覽

阿新 • • 發佈：2019-01-04

/** * Created by Administrator on 2016/4/28. */ //上傳圖片並預覽 function previewImg(fileInput,imgDiv){ if(window.FileReader){//支援FileReader的時候 var reader=new FileReader(); reader.readAsDataURL(fileInput.files[0]); reader.onload=function

(evt){ imgDiv.innerHTML="\<img src="+evt.target.result+"\>"; } }else{//相容ie9- imgDiv.innerHTML='<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + fileInput.value + '\)\';"></div>'

; } } function selectImg(fileInputs,imgDivs){ var checkImg=new RegExp("(.jpg$)|(.png$)|(.bmp$)|(.jpeg$)","i"); var i=0; for(;i<fileInputs.length&&i<imgDivs.length;i++){ (function(i){//立即執行函式；儲存i fileInputs[i].onchange=function

(){ if(checkImg.test(fileInputs[i].value)){ previewImg(this,imgDivs[i]); }else{ alert("只支援上傳.jpg .png .bmp .jpeg;你的選擇有誤"); } }; })(i); } } /* 為IE6 IE7 IE8增加document.getElementsByClassName函式 */ /MSIE\s*(\d+)/i.test(navigator.userAgent); var isIE=parseInt(RegExp.$1?RegExp.$1:0); if(isIE>0&&isIE<9){ document.getElementsByClassName=function(cls){ var els=this.getElementsByTagName('*'); var ell=els.length; var elements=[]; for(var n=0;n<ell;n++){ var oCls=els[n].className||''; if(oCls.indexOf(cls)<0) continue; oCls=oCls.split(/\s+/); var oCll=oCls.length; for(var j=0;j<oCll;j++){ if(cls==oCls[j]){ elements.push(els[n]); break; } } } return elements; } } var fileInputs=document.getElementsByClassName("img-btn");//檔案選擇按鈕 var imgDivs=document.getElementsByClassName("img-container");//圖片容器 selectImg(fileInputs,imgDivs);

用javascript實現圖片上傳並預覽

用javascript實現圖片上傳並預覽

JQuery Ajax實現圖片上傳並預覽

Ajax實現圖片上傳並預覽

前端H5實現多圖片上傳並預覽

html5 FileReader 實現本地圖片上傳並預覽應用例項

AJAX實現圖片上傳和預覽（傳統ajax與jQuery AJAX；帶圖片的表單提交）

angularjs 實現圖片上傳實時預覽

tp5簡單的多圖片上傳並預覽demo

layui實現圖片上傳和預覽功能

Bootstrap多圖片上傳並預覽（tp5）

實現圖片上傳前預覽

前端實現圖片上傳實時預覽的兩種方式

用原生JS實現多張圖片上傳及預覽功能（相容IE8）

ajaxFileUpload實現圖片的上傳並預覽

input file實現多選，限制文件上傳類型，圖片上傳前預覽功能

javascript實現圖片上傳實時顯示上傳圖片

《商城專案03》--用FastDFS實現圖片上傳

基於jQuery和cropper點選頭像上傳並預覽裁剪圖片

ssm框架實現圖片上傳並顯示（myeclips）

使用js和jquery實現點選圖片上傳及預覽

用javascript實現圖片上傳並預覽

相關推薦