本文基于我刚写的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. 什么是LeapMotion

    LeapMotion预览——什么是LeapMotion LeapMotion预览 这个就是LeapMotion: 原文转自:   LeapMotion预览 LeapMotion 官网:http://l ...

  2. CXF.bat

    @echo off rem ------------------------------------------------------------------- rem CXF Environmen ...

  3. 2013Esri全球用户大会之互操作和标准

    1:Esri在开源领域做过哪些工作? Esri一直以来就是开源技术的用户和支持者.我们相信,通过提供从上到下的开放平台可使我们的用户成为开发能力强大的解决方案的积极参与者.在现有技术形势下,我们正在将 ...

  4. JS的运算问题……

    在公司实习期间,发现了一个JS很奇怪的问题. 今天在这里来探讨一下 第一个问题 在生活中或者其他语言中一般相加是这样的:0.1+0.2=0.3; 但在JS中却是这样:0.1+0.2=0.3000000 ...

  5. IronPython .NET Integration官方文档翻译笔记

    http://ironpython.net/documentation/dotnet/这是原文地址 以下笔记仅记录阅读过程中我认为有必要记录的内容,大多数都是依赖翻译软件的机翻,配合个人对代码的理解写 ...

  6. sed常见用法，删除匹配行的上2行，下3行

    删除匹配的下一行到最后一行 [root@test200 ~]# cat test a b c d e f [root@test200 ~]# sed '/c/{p;:a;N;$!ba;d}' test ...

  7. android 物理按键 监听

    android连接了一个4x4的矩阵键盘,linux内核中注册了按键,在app中监听键盘事件. package com.example.tony.keydemo; import android.sup ...

  8. Objective-C Runtime 运行时之五：协议与分类(转载)

    Objective-C中的分类允许我们通过给一个类添加方法来扩充它(但是通过category不能添加新的实例变量),并且我们不需要访问类中的代码就可以做到. Objective-C中的协议是普遍存在的 ...

  9. .net mvc 超过了最大请求长度 限制文件上传大小

    在我们的项目中遇到"超过了最大请求长度"如下图所示,是因为IIS默认请求长度4M,当请求长度大于这个值的时候报错,下面是解决方案. 解决方案:修改web.config文件 1.注意 ...

  10. java操作mongodb——连接数据库

    import com.mongodb.MongoClient; MongoClient mongoClient = new MongoClient(); 连接MongoDB实例,默认为localhos ...