本文基于我刚写的http://www.cnblogs.com/iwang5566/p/6287529.html进行了简单的扩展，实现页面无跳转表单数据提交，并接收后台返回的数据。

下载好，上一篇文章demo文件,替换指定文件即可。

index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <form action="/upload" enctype="multipart/form-data" method="post">

        <p>附件：<input type="file" name="myfile" style=""></p>

        <p>

            <input type="submit">

        </p>

    </form>

    <!--

        实现无跳转发送表单数据，文件。并能接收后台返回的数据。

        主要技术要点：

            1.form表单添加target属性，指定一个iframme的name。form表单提交后在iframe内嵌窗口接受响应。主页面就不会再跳转。

            2.同是，我们需要，接收，知道后台返回的数据。以便我的的业务处理。这里让后台返回一个带有执行一个函数的script标签。

    -->

    <iframe name="message" style="display: none"></iframe>

    <form action="/upload1" enctype="multipart/form-data" method="post" target="message">

        <p>附件：<input type="file" name="myfile" style=""></p>

        <p>

            <input type="submit">

        </p>

        <p id="success" style="display: none;">上传成功</p>

    </form>

</body>

<script type="text/javascript">

    function uploadSuccess(data) {

        console.log(data);

        var p = document.getElementById('success');

        p.innerText = JSON.stringify(data);

        document.getElementById('success').style.display = 'block';

    }

</script>

</html>

app.js

/**

 * Created by iwang on 2017/1/15.

 */

//express使用的是@4版本的。

var express = require('express');

//form表单需要的中间件。

var mutipart= require('connect-multiparty');

var mutipartMiddeware = mutipart();

var app = express();

//下面会修改临时文件的储存位置，如过没有会默认储存别的地方，这里不在详细描述。

app.use(mutipart({uploadDir:'./linshi'}));

//设置http服务监听的端口号。

app.set('port',process.env.PORT || 3000);

app.listen(app.get('port'),function () {

    console.log("Express started on http://localhost:"+app.get('port')+'; press Ctrl-C to terminate.');

});

//浏览器访问localhost会输出一个html文件

app.get('/',function (req,res) {

    res.type('text/html');

    res.sendfile('public/index.html')

});

//这里用来玩，express框架路由功能写的，与上传文件没没有关系。

app.get('/about',function (req,res) {

    res.type('text/plain');

    res.send('Travel about');

});

//这里就是接受form表单请求的接口路径，请求方式为post。

app.post('/upload',mutipartMiddeware,function (req,res) {

    //这里打印可以看到接收到文件的信息。

    console.log(req.files);

    /*//do something

    * 成功接受到浏览器传来的文件。我们可以在这里写对文件的一系列操作。例如重命名，修改文件储存路径 。等等。

    *

    *

    * */

    //给浏览器返回一个成功提示。

    res.send('upload success!');

});

app.post('/upload1',mutipartMiddeware,function (req,res) {

    //这里打印可以看到接收到文件的信息。

    console.log(req.files);

    var data = JSON.stringify(req.files);

    console.log(typeof data);

    //给浏览器返回一个成功提示。

    res.send('<script>window.parent.uploadSuccess('+data+')</script>');

});

如过你不需要暂停上传功能，和上传进度功能。那么上面的技术就可以让你实现上传功能了，能兼容ie低版本浏览器。

from表单实现无跳转上传文件，接收页面后台数据。的更多相关文章

  1. from表单实现无跳转上传文件，接收页面后台数据

    实现无跳转发送表单数据.文件,并能接收后台返回的数据. 主要技术要点: 1.form表单添加target属性,指定一个iframme的name:form表单提交后在iframe内嵌窗口接受响应,主页面 ...

  2. c# 模拟表单提交，post form 上传文件、大数据内容

    表单提交协议规定:要先将 HTTP 要求的 Content-Type 设为 multipart/form-data,而且要设定一个 boundary 参数,这个参数是由应用程序自行产生,它会用来识别每 ...

  3. c# 模拟表单提交，post form 上传文件、数据内容

    转自:https://www.cnblogs.com/DoNetCShap/p/10696277.html 表单提交协议规定:要先将 HTTP 要求的 Content-Type 设为 multipar ...

  4. 使用django表单，使网页添加上传文件，并分析文件。

    开发环境是: apache + python + django+ eclipse(开发环境) 欲达到目的: 在网页上,添加上传文件控件.然后读取csv文件,并分析csv文件. 操作步骤: django ...

  5. 摒弃FORM表单上传图片，异步批量上传照片

    之前作图像处理一直在用form表单做图片数据传输, 个人感觉low到爆炸而且用户体验极差,现在介绍一个一部批量上传图片的小技巧,忘帮助他人的同时也警醒自己在代码的编写时不要只顾着方便,也要考虑代码的健 ...

  6. JQUERY AJAX无刷新异步上传文件

    AJAX无刷新上传文件并显示 http://blog.csdn.net/gao3705512/article/details/9330637?utm_source=tuicool jQuery For ...

  7. app端上传文件至服务器后台，web端上传文件存储到服务器

    1.android前端发送服务器请求 在spring-mvc.xml 将过滤屏蔽(如果不屏蔽 ,文件流为空) <!-- <bean id="multipartResolver&q ...

  8. jQuery 关于IE9上传文件无法进入后台问题的原因及解决办法（ajaxfileupload.js第四弹）

    第四弹的诞生完全不在自己最初的计划之中,是有个网友看了先前关于<ajaxfileupload.js系列>的文章后提出的问题,由于自己一直是用chrome浏览器去测试demo,完全忽略IE浏 ...

  9. spring mvc + ajax上传文件，页面局部刷新

    1.点击上传按钮进行如下操作,通过表单名称以及input名称获取相应的值,对于上传的文件,使用.files来获取, 因为包含文件的上传,所以采用FormData的形式来进行数据交互,通过append将 ...

随机推荐

  1. spring.net AOP初探

    AOP是什么? 面向切面编程,在OO中有一个开放关闭原则,及对修改关闭,对扩展开放.AOP可以说是设计模式的集合加强版,使用代理.工厂.策略等等模式,来实现方法的结合.这样说还比较模糊,我们先往下看. ...

  2. http学习笔记2（URL）

    http学习笔记(二)—— 嘿!伙计,你在哪?(URL) 我们之所以希望浏览网页,其中一个重要的原因就是庞大的web世界中有很丰富的资源,他就像哆啦a梦的口袋,随时都能拿出我们想要的宝贝.这些资源通过 ...

  3. asp.net中的路由系统

    ASP.NET MVC重写了ASP.NET管道HttpModule和处理程序HttpHandler.MVC自定义了MvcHandler实现了Controller的激活和Action的执行.但是在请求到 ...

  4. 语音语音合成科大讯飞和Tizen-TTS语音合成引擎

    废话就不多说了,开始...      最近在做一个文本转语音TTS(Text to Speech)的第三方软件封装,应用的是海内语音技术龙头安徽科大讯飞公司提供的离线引擎AiSound5.0,重要用于 ...

  5. phper談談最近重構代碼的感受(3)

    这篇文章本来该和同一系列的文章一起写的,因为最近换工作的缘故滞后了.重构是非常细碎的叠加,有很多值得注意的地方. 1.消灭过多的临时变量. 有时候过多的无意义的临时变量,真心让人抓狂,特别是过了比较长 ...

  6. SQlServer---时间的操作

    select Day(getdate())--当前日是这个月的第几天 -Day(getdate()))))--当前月有多少天 -Day(getdate()))))-Day(getdate())--当前 ...

  7. Linux 内核源码中likely()和unlikely()

    ikely()与unlikely()在2.6内核中,随处可见,那为什么要用它们?它们之间有什么区别呢? 首先明确: if (likely(value))等价于if (value)if (likely( ...

  8. jquery表格提交验证

    在表格中的验证 1.body中的内容 <form action="http://www.qq.com" id="form1"><table w ...

  9. eclipse安装

    1.下载破解版本 地址:http://www.oyksoft.com/soft/1250.html 2.解压下载包,直接运行eclipse.exe  3.安装过程中如果遇到问题 1).如果遇到erro ...

  10. Kattis - Biased Standings

    Biased Standings Usually, results of competitions are based on the scores of participants. However, ...