摘要:文件上传在不借助第三方的插件的情况下进行文件上传可利用表单对象表单是不存在浏览器的兼容性的,同时在被禁用的情况下也能进行文件的传输,因此可以大胆使用。使用表单提交文件一个非常典型的应用场景就是上传图片,但是页面不刷新。
文件上传
在不借助第三方的插件的情况下进行文件上传可利用:
Form表单
FormData对象
Form表单是不存在浏览器的兼容性的,同时在js被禁用的情况下也能进行文件的传输,因此可以大胆使用。Form表单提交不同于Ajax,Ajax提交数据还需要利用脚本进行数据的处理,而Form是不需要进行任何数据处理的。
使用Form表单提交文件一个非常典型的应用场景就是上传图片,但是页面不刷新。
常用属性target(数据提交完后,后台返回数据展示的位置,常用_blank, _self, 指定的iframe)
action(数据提交的接口)
enctype(设置上传数据编码类型,常用的application/x-www-form-urlencoded,multipart/form-data)
method(HTTP请求的方式,常用GET/POST)
示例使用Form表单异步上传图片,获取后台返回的图片路径,页面不发生跳转。
Html:
js:
(function(window) { var win = window, btn = document.getElementsByTagName("button")[0], container = document.getElementById("container"), form = document.getElementsByTagName("form")[0]; btn.addEventListener("click", function() { var ifr = document.createElement("iframe"); ifr.id = "test-ifr"; ifr.name = "test-ifr"; //隐藏iframe ifr.style.display = "none"; container.appendChild(ifr); //iframe加载事件,获取到数据以前onload会触发一次,获取到数据后再触发一次,需要添加一个判断 ifr.onload = function () { //后台尽量传JSON的字符串,这样可以确保一致性,同时可以调用innerHTML来获取DOM里面的内容 var _result = JSON.parse(this.contentDocument.getElementsByTagName("body")[0].innerHTML); //iframe的body标签里面的内容就是从后台传输过来的数据。例如后台传输过来的是图片的url地址 var _img = new Image(); _img.src = _result.url; container.appendChild(_img);//显示图片 }; //调用Form表单事件 form.submit(); }) })(window);
server:
var express = require("express"); var bodyParser = require("body-parser"); var app = express(); app.use(bodyParser.json()); app.use(bodyParser.urlencoded()); app.use(express.static("./")); app.get("/", function (req, res) { res.sendFile("index.html"); }); app.post("/", function (req, res) { setTimeout(function () { var str = JSON.stringify({url: "./imgs/1.png"}); res.send(str); }, 1000); }); app.listen(3000, function () { console.log("The server has start up on port of 3000"); });
如果现在需求变化了,必须要求前端上传图片后需要立马在前端展示出来,而不是通过上传至服务器端,拿到Url后再展示。现在HTML5提供了3种API可以做到。
FileReader
canvas
ceateObjectURL()
FileReader//multiple属性支持多文件上传
var aInput = document.getElementByTagName("input")[0], imgContainer = document.getElementByClassName("img-container")[0]; aInput.addEventListener("change", function() { for(var i = 0; i < this.files.length; i++) { var img = new Image(), reader = new FileReader(), url = reader.readAsDataURL(this.files[i]); imgContainer.appendChild(img); reader.onload = function(e) { img.src = e.target.result; } } });
这个API主要是是将Image转化成了base64,这样图片就能在不推送的服务器后才显示。
FileReader兼容性
canvas是在网页中生成一块画图,然后利用drawImage方法,将图片在画布中重新绘制。
var img = new Image(), canvas; img.onload = function () { canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; var context = canvas.getContext("2d"); context.drawImage(img, 0, 0); console.log(canvas.toDataURL()); document.body.appendChild(canvas); return canvas; }; img.src = "./images/1.png"; //drawImage即将img画到画布区域内,接收三个参数,第一个是img对象,第二个是绘制的起始位置水平,第三个是绘制的垂直位置。
canvas兼容性
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/79973.html
摘要:提交提交数据,但页面不跳转,可以使用简单方法提交表单页面不跳转提交页面返回的数据显示在中注意中的一定是你要指定要显示返回结果的标签中的属性注意可以放到中的任何位置特别注意可以放到中 1.提交form,action 提交数据,但页面不跳转,可以使用Iframe简单方法 Form提交表单页面不跳转
阅读 1172·2023-04-25 20:31
阅读 3673·2021-10-14 09:42
阅读 1446·2021-09-22 16:06
阅读 2572·2021-09-10 10:50
阅读 3474·2021-09-07 10:19
阅读 1742·2019-08-30 15:53
阅读 1139·2019-08-29 15:13
阅读 2782·2019-08-29 13:20