Form表单和Iframe实现文件上传,页面不跳转

2016-07-11 22:41:00

文件上传

在不借助第三方的插件的情况下进行文件上传可利用：

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');
});

关键字：JavaScript, form, var, function

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击举报进行投诉反馈！