js 读取本地图片进行预览,上传服务器
1.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>2.服务器接收数据,然后写到磁盘 3.配置文件web.xml 4.需要注意的地方 需要jquery的支持:jquery-1.11.1.min.js 需要servlet的支持:servlet-api.jar 需要Base64解码支持:sun.misc.BASE64Decoder。引入这个包eclipse可能会报错,请按照http://blog.csdn.net/hurryjiang/article/details/6958146进行处理。