项目实训(九) —— 上传页调整

有关上传页面，之前已经变为了弹窗形式，接下来本文主要记录输入框的调整和上传后防止跳转的问题。

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>

最后，本周重头实现了弹窗详情、复刻了翻页功能、连接远程数据库也正在努力，这些下周再写。