js 实现 一张图片的上传

.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>

posted on 2017-04-28 09:38  童彪  阅读(1647)  评论(0)  编辑  收藏  举报

导航