您的位置：首页 > Web前端 > JavaScript

利用 Javascript 实现上传图片并向服务器获取图片路径后显示的 demo

2017-10-21 23:48 731 查看

由于某些特殊原因，有时需要从服务端请求到图片路径，需要给该接口传递对应图片的base64 dataURL，并且有时需要将其上传图片的类型统一为 jpeg 格式时，可采用以下方式。

HTM L代码如下：

<html>
<meta charset="utf-8">
<form action="表单提交处理的url" method="post">
<img id="showImg" src=""/>
<br/>
<!--下面的隐藏域主要用来改变file类型的input的值，但是file类型的input的值出于安全考虑不让修改，但是表单提交后需要处理该值(放置图片路径)来显示服务器上的图片-->
<input type="hidden" id="img" name="uploadImg"/>
请选择上传图片：<input type="file" id="uploadImg" onchange="selectImg(this);"/>
</form>
</html>

JS 代码如下：

<script type="text/javascript">
var image = '';
var canvas;
var base64;//将canvas压缩为base64格式
function selectImg(file){
if(!file.files || !file.files[0]){
return;
}
var reader = new FileReader();//读取文件
reader.onload = function(event){//文件读取完成的回调函数
image = document.getElementById('showImg');
image.src = event.target.result;//读入文件的base64数据(可直接作为src属性来显示图片)
//alert(event.target.result);
//图片读取完成的回调函数（必须加上否则数据读入不完整导致出错！）
image.onload = function(){
canvas = convertImageToCanvas(image); //图片转canvas
base64 = canvas.toDataURL('image/jpeg'); //将图片数据转为base64.
//alert(base64);
$.post(
"/server_interface_url/", //服务器接口(返回图片路径)
{data:base64},
function(data) {
alert(data.target);
//alert(eval(data));
//修改上传文件的路径名字(图片完整路径)
$('#img').val('http://path/'+data.target);
}, "json");
}
}
//将文件已Data URL的形式读入页面
reader.readAsDataURL(file.files[0]);
}
// 把image 转换为 canvas对象
function convertImageToCanvas(image) {
// 创建canvas DOM元素，并设置其宽高和图片一样
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
// 坐标(0,0) 表示从此处开始绘制，相当于偏移。
canvas.getContext("2d").drawImage(image, 0, 0);

return canvas;
}
</script>

原始页面效果如下：

选择上传图片后并显示在页面的效果如下：

然后要提交表单之后显示图片的话就得传递该图片的完整路径过去，由于 file 类型的 input 出于安全考虑不让修改其 value 值，于是我就利用一个隐藏域指定其 value 值为该图片的路径以此来给表单接收该值，这样就解决了该问题了！

注意：虽然文件加载进来了，但是图片也需要加载进来再进行处理，也就是要加上 image.onload 函数对图片进一步处理，否则返回的图片路径访问不了，提示图片内容有错，应该就是图片数据不完整的缘故了，所以上面两个异步执行的 onload 函数都要加上。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航