有关上传页面,之前已经变为了弹窗形式,接下来本文主要记录输入框的调整和上传后防止跳转的问题。
1. 输入框调整:
<input class="txt" type = "text" name = "food_name" />
<textarea class="txt" rows="5" name ="food_material">
后者文本较长,类型改为textarea,可以输入行满时自动另起一行。
再经过CSS排版后,就有了如下效果:
2. 上传后强制不切换:
点击上传按钮后,一般会跳转到表单action里的地址。这种自动的几乎强制性的跳转,使得原页面无法保持,对原页面显示图片和弹窗带来了极大的困扰。
在搜索好多网页后,得出了一种解决的手段:在当前表单头,插入一个iframe标签,然后让表单target指向这个iframe标签:
<form id="upload_form" action="/" target="frame1" method="POST" enctype="multipart/form-data">
<iframe name="frame1"></iframe>
这样,点击上传按钮后,iframe标签内的页面代替了原本的action里的地址跳转,然后用CSS把iframe样式变小、变透明,跳转页面就完全消失了,成功保持了原页面。
3. 上传页显示图片:
借助同学的帮助,终于实现了上传的弹窗内的图片显示。
代码函数
function changeUploading(){
var objUrl = getObjectURL(document.getElementById('upload_input').files[0]);
console.log(objUrl);
document.getElementById('upload_pic').src = objUrl;
}
function getObjectURL(file){
var url = null;
if(window.createObjectURL!=undefined){
url = window.createObjectURL(file);
}else if(window.URL!=undefined){
url = window.URL.createObjectURL(file);
}else if(window.webkitURL!=undefined){
url = window.webkitURL.createObjectURL(file);
}
return url;
}
调用函数:
<div> <input class="button" type="submit" value="上传" onclick="changeUploading()" /></div>
结果图片:
到此为止的图片,点击上传后出现预览,实际想让它更加实时,调整如下点。
4. 图片预览最终版实现:
借助了file.onchange的机制,实时变动,选图自动预览:
<label for="file">
<img id="upload_pic" src="./static/user_pic/no.jpg">
</label>
<script>
let file = document.querySelector("input[type=file]");
file.onchange = () => {
//获取input file的files文件数组;
var fileData = file.files[0];
//创建用来读取此文件的对象
var reader = new FileReader();
//使用该对象读取file文件
reader.readAsDataURL(fileData);
//读取文件成功后执行的方法函数
reader.onload = function(e) {
//读取成功后返回的一个参数e,整个的一个进度事件
console.log(e);
//选择所要显示图片的img,要赋值给img的src就是e中target下result里面
//的base64编码格式的地址 document.querySelector("#upload_pic").setAttribute("src", e.target.result)
}
}
</script>
5. 结果页面转弹窗:
6. 进一步控制“首页—上传页弹窗—结果页弹窗”的跳转关系:
<script type="text/javascript">
function formReset(){
document.getElementById("upload_form").reset();
}
function my_refresh(){
window.location.reload();
}
function show_upload(){
formReset();
document.getElementById('upload_window').style.display="";
}
function close_upload(){
document.getElementById('upload_window').style.display="none";
my_refresh();
}
function show_result(){
document.getElementById('upload_window').style.display="none";
document.getElementById('result_window').style.display="";
}
function confirm_result(){
document.getElementById('upload_window').style.display="none";
document.getElementById('result_window').style.display="none";
my_refresh();
}
function upload_again(){
show_upload();
document.getElementById('upload_pic').src = "./static/user_pic/no.jpg";
document.getElementById('result_window').style.display="none";
}
</script>
最后,本周重头实现了弹窗详情、复刻了翻页功能、连接远程数据库也正在努力,这些下周再写。