本文基于我刚写的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. HTTP状态码的意义

    100系列码 从100到199范围的HTTP状态码是信息报告码.基于各种原因考虑,大多数情况下我们是 很少看见这些代码的.首先,如果一个浏览器尝试访问一个网站,而网站返回这些代码时,它们往往都不会显示 ...

  2. 依赖注入（IOC）二

    依赖注入(IOC)二 上一章我们讲了构造注入与设值注入,这一篇我们主要讲接口注入与特性注入. 接口注入 接口注入是将抽象类型的入口以方法定义在一个接口中,如果客户类型需要获得这个方法,就需要以实现这个 ...

  3. AspxTreeList获取选中项的值

    在csdn上了发了次帖子,没人回复,只有自己结贴了.http://bbs.csdn.net/topics/390706314?page=1#post-396723432 //通过选中的节点获取用户ID ...

  4. JBPM4 安装和配置

    安装和配置jBPM4,并举个hello.w   至于网上很复杂,但又不懂的插件,我们先不鸟他. myeclipse8\dropins这里就是给我们放插件的,类似SVN之类的.所以小生也修改了下,共享了 ...

  5. JavaEE：Tomcat服务器常用配置和HTTP简介

    Web服务器常用配置1．Web系统采用B/S结构通信的:Browser --- Server1)浏览器向服务器发送访问目标资源请求(请求)2)服务器根据请求的目标资源路径,在服务器端进行查找(请求查找 ...

  6. bat编程基本知识

    1 声明变量 ::注意=前后不要留空格.随便说一下,在bat中,连续两个冒号表示注释 set var1=test 如果要引用这个变量的话,可以这样写:%var1% 2 echo off/on echo ...

  7. wget ( download the whole page from the website )

    ---恢复内容开始--- wget -m -e robots=off -U "Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN; rv:1.9.1 ...

  8. Ling to entity实现分页

    Ling to entity实现分页 最近用MVC做的一个项目涉及到分页,中间用了entity framework来查数据库,不用直接写sql语句,方便了很多. 一般分页的思路是获得两个变量的值: 1 ...

  9. Android——另外一种增删查改的方式(ContentProvider常用)

    以下介绍另外一种增删查改的方式 package com.njupt.sqllist; import java.util.ArrayList; import java.util.List; import ...

  10. 官网.jar包下载技巧

    最近在学Java,但是往往要用到好多jar包,只能从网上下载,但是网上找实在太费事了,而且有时候给我们带来了许多的不便.找不到jar包程序就运行不了,心里真不是个滋味.可是自己就是不甘心.经过我的不懈 ...