前端 上傳預覽功能實現
阿新 • • 發佈:2018-07-11
rip log wid 直接 java ner box ava urn
<div style="position: relative;"> <input id="files" type="file" onchange="previewImage(this, ‘prvid‘)" multiple="multiple" style="cursor: pointer;z-index: 9999;position: absolute;opacity: 0;padding: 80px 0px;"> <div id="prvid" style="border: 1px solid #bfbfbf; height: 160px; width: 270px; border-radius: 10px;"> <img src="../resources/imgs/selectImg.png" style="position: absolute;top: 50px;left: 130px;" /> <p class="showFileName" style="margin-top: 95px;color: #bfbfbf; text-align: center;">選擇文件</p> </div> </div>
function previewImage(file, prvid) { /* file:file控件 * prvid: 圖片預覽容器 */ var prvbox = document.getElementById(prvid); var tip = "請上傳jpg/png/gif格式的圖片文件!"; // 設定提示信息 var filters = { "jpeg" : "/9j/4", "gif" : "R0lGOD", "png" : "iVBORw" } var html1 = ‘<img src="../resources/imgs/selectImg.png" style="position: absolute;top: 50px;left: 130px;" />‘+ ‘<p class="showFileName" style="margin-top: 95px;color: #bfbfbf; text-align: center;">選擇文件</p>‘; if (window.FileReader) { // html5方案 var fileSize = file.files[0].size if(fileSize>500000){ alert("請上傳小於500K的文件!") return; } for (var i=0, f; f = file.files[i]; i++) { var fr = new FileReader(); fr.onload = function(e) { var src = e.target.result; if (!validateImg(src)) { alert(tip) } else { showPrvImg(src); } } fr.readAsDataURL(f); } } else { // 降級處理 if ( !/\.jpg$|\.png$|\.gif$/i.test(file.value) ) { alert(tip); } else { var fileObj = file.files[0].size; console.log(fileObj); showPrvImg(file.value); } } function validateImg(data) { var pos = data.indexOf(",") + 1; for (var e in filters) { if (data.indexOf(filters[e]) === pos) { return e; } } return null; } function showPrvImg(src) { var img = document.createElement("img"); img.src = src; img.style.width = "270px"; img.style.height = "160px"; img.style.borderRadius = "10px"; //img.style.filter = ‘alpha(opacity:‘+50+‘)‘; //設置IE的透明度 //img.style.opacity = 50 / 100; //設置fierfox等透明度,註意透明度值是小數 prvbox.innerHTML = ""; prvbox.appendChild(img); var file = $("#files").val(); var arr=file.split(‘\\‘); console.log(arr) var fileName=arr[arr.length-1]; console.log(fileName) //document.getElementsByClassName(‘showFileName‘).innerHTML=fileName; //$(".showFileName").val(fileName); //$(".showFileName").html(fileName); } }
直接粘代碼吧;
然後
上傳預覽的原理就是:
通過input的type=file屬性和window的內置FileReader對象,利用FileReader對象的readAsDataURL方法把圖片數據轉成base64字符串數據,然後把這個base64字符串數據賦值給一個圖片標簽的src屬性..
然後
就實現預覽效果啦
前端 上傳預覽功能實現