前端的工作总结 <一> Web端打开显示图片，并从服务器获取
2018-07-27 本文已影响0人
步履不停的Suunny
前端姐姐上线。
这次的需求是，写一个前端页面， 打开一张图片，上传到服务器，然后从服务器端获取图片的信息，并展示到前端界面，同时可以修改信息，并提交。
涉及的技术： HTML5. CSS, JavaScript,Ajax等。
好吧，一个一来，好在需求不复杂。
HTML5和CSS会一些，能看懂，但不精，需要查查语法和参数，好在需求简单，写出来应该不难，还有Google、度娘帮忙。
JavaScript和Ajax就没写过了，基本没接触过。 现学现用。
好啦，开动。
从写界面开始。
编写过程中遇到的第一个问题， CSS布局居中， 在CSS中添加body布局设置
body
{
background-color:white;
text-align: center;
margin: auto;
}
为图片设置显示大小和位置的CSS： #号表示id
#result{
width: 640px;
height:380px;
border:1px solid #eee;
margin: auto;
}
#result img{
width: 640px;
}
body中调用：
<div id = "result" ><img src = "invoiceDemo.png"></div><br>
图片显示框，和打开图片后，图片展示大小就都规定好了。
下一个问题，本地打开一个图片并展示。 网上找的现成的JavaScript代码，
var form = new FormData();//通过HTML表单创建FormData对象
function selectFile(){
var files = document.getElementById('pic').files;
console.log(files[0]);
if(files.length == 0){
return;
}
var file = files[0];
//把上传的图片显示出来
var reader = new FileReader();
// 将文件以Data URL形式进行读入页面
console.log(reader);
reader.readAsBinaryString(file);
reader.onload = function(f){
var result = document.getElementById("result");
var src = "data:" + file.type + ";base64," + window.btoa(this.result);
result.innerHTML = '<img src ="'+src+'"/>';
}
console.log('file',file);
form.append('file',file);
console.log(form.get('file'));
}
下一步从服务器获取信息，接口返回json文件。
这里涉及到跨域的问题，度娘问了一圈，决定用Ajax jsonp来解决。 实现如下：
<script type="text/javascript" src="http://www.w3dev.cn/rardownload/20130106/20130106170832648.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script>
var invoiceNo
var invoiceID
function testJsonp(){
$.ajax({
type : 'GET',
dataType : 'json', // 数据类型配置成jsonp
url:'http://10.26.6.222:5000/api/detect_in',
async : false,
data:{
q: "select * from json where url=\"http://www.w3dev.cn/json.asp\"",
format: "json"
},
success : function (response) {
responseData= JSON.stringify(response);
var obj = eval('(' + responseData + ')');
invoiceID = obj.data['DocNumber'];
invoiceNo = obj.data['DocType'];
//alert( invoiceID)
},
error : function (){
alert('服务器异常！' );
}
});
}
</script>
将获取到的信息展示在前端，接上面代码：
$(document).ready(function(){
$("#button1").click(function () {
$("#text1").val(invoiceID);
$("#text2").val(invoiceNo);
});
});
body代码如下：
<body>
<h3> 增值税发票校对平台 </h3>
<input id="pic" type="file" name = 'pic' accept = "image/*" onchange = "selectFile()"/><br>
<div id = "result" ><img src = "invoiceDemo.png"></div><br>
<p><button id="button_upload" > 上传图片 </button> <button id="button1" onclick="testJsonp()"> 获取发票信息 </button></p>
<p>发票代码: <input type="text" id="text1" value="" > </p>
<p>发票号码: <input type="text" id="text2" value=""></p>
<!--input type="button", onclick="", value="提交"-->
</body>
由于上传和提交的服务端接口没写好，暂时先不写了。
基本完成了。
实现的都是最简单的代码， 对前端不熟悉，理解比较浅，目前的代码有不可预估的风险。后面运行过程中遇到问题再来解决。
上一个成品：
image.png
