.js進行圖片預覽 使用input標簽來選擇圖片,使用FileReader讀取圖片並轉成base64編碼,然后發送給服務器。
<html> <body> <img id="image"src=""/> <br/> <input type="file"onchange="selectImage(this);"/> <br/> <input type="button"onclick="uploadImage();"value="提交"/> <script> var image = ''; function selectImage(file){ if(!file.files || !file.files[0]){ return; } var reader = new FileReader(); reader.onload = function(evt){ document.getElementById('image').src = evt.target.result; image = evt.target.result; } reader.readAsDataURL(file.files[0]); } function uploadImage(){ $.ajax({ type:'POST', url: 'ajax/uploadimage', data: {image: image}, async: false, dataType: 'json', success: function(data){ if(data.success){ alert('上傳成功'); }else{ alert('上傳失敗'); } }, error: function(err){ alert('網絡故障'); } }); } </script> <script src="jquery-1.11.1.min.js"></script> </body> </html>