本文基于我刚写的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. jquery mobile扁平化设计样式--Jquery mobile Flat UI介绍

    jquery mobile扁平化设计样式--Jquery mobile Flat UI介绍 这几天开发的web app使用了jquery mobile,jquery mobile自带的样式比较适合做企 ...

  2. 单例模式及C++实现代码

    单例模式及C++实现代码 单例模式 单例模式,可以说设计模式中最常应用的一种模式了,据说也是面试官最喜欢的题目.但是如果没有学过设计模式的人,可能不会想到要去应用单例模式,面对单例模式适用的情况,可能 ...

  3. 开源中文分词工具探析（三）：Ansj

    Ansj是由孙健(ansjsun)开源的一个中文分词器,为ICTLAS的Java版本,也采用了Bigram + HMM分词模型(可参考我之前写的文章):在Bigram分词的基础上,识别未登录词,以提高 ...

  4. jvm回收方法区

    很多人认为方法区(或者HotSpot虚拟机中的永久代)是没有垃圾收集的,Java虚拟机规范中确实说过可以不要求虚拟机在方法区实现垃圾收集,而且在方法区进行垃圾收集的“性价比”一般比较低:在堆中,尤其是 ...

  5. Hibernate3 第二天

    Hibernate3 第二天 第一天回顾: 三个准备 创建数据库 准备po和hbm文件 准备灵魂文件hibernate.cfg.xml 七个步骤 1 加载配置文件Configuration 2 创建会 ...

  6. CodeForces 635C XOR Equation

    位运算. 又涨姿势了:$a + b = (aXORb) + 2*(aANDb)$,$ (aXORb)$是不进位的部分,$2*(aANDb)$为进位之后的部分,相加就是$a + b$. 知道了这个转换, ...

  7. 【Excel】获取网页标题的VBA

    在宏录制,完成后可以直接在网格上调用Title(网址).但好些会访问不了,原因不明. Function Title(ByVal url As String) As StringOn Error Res ...

  8. Javascript赋值语句中的“&&”操作符和＂||＂操作符

    有这么一种常见的语句: var a = a || 4; 那赋值语句中的"&&"操作符和"||"操作符是什么意思?如何知道这两个逻辑操作符两旁的数 ...

  9. Zabbix-agent使用自带模板监控 MySQL

    1.rpm -ivh http://repo.zabbix.com/zabbix/2.4/rhel/6/x86_64/zabbix-release-2.4-1.el6.noarch.rpm 2.yum ...

  10. 学习Sass（一）

    一.什么是sass? 写过css的都知道,css是用来改变页面样式的.但它不是一种编程语言,没有变量,函数,继承等功能,只能一条条抒写样式语句很死板.在这个工具决定效率的时代,这是不能容忍的事情.怎样 ...