本文基于我刚写的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. js中的“闭包”

    js中的“闭包” 姓名:闭包 官方概念:闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分. ( ⊙o⊙ )!!!这个也太尼玛官方了撒,作为菜鸟的 ...

  2. ASP.NET MVC：会导致锁定的会话

    ASP.NET MVC:会导致锁定的会话 背景 一直没有意识到会话的访问会导致会话锁定,现在想想这样设计是非常合理的,不过某些情况下这样会导致同一个会话的并发访问非常低(只能串行化),好在MS提供了机 ...

  3. Entity Framework 之 Code First

    使用NuGet助您玩转代码生成数据————Entity Framework 之 Code First [前言] 如果是Code First老鸟或者对Entity Framework不感兴趣,就不用浪费 ...

  4. python cookbook学习笔记 第一章 文本(2)

    1.6合并字符串 ka=list('kaluoc') #字符串转成字符串列表 print ''.join(ka) #大量的字符串相连,join是最高效的 print '%s%s something % ...

  5. How to deploy openbr on linux server very shorly---- linuxmint13/ubuntu12.04 AMD64/debian7

    SO FAST ON A SERVER!!!! There are serveral packages that you have to install: 1. openbr 0.6.0 packag ...

  6. MongoDb注意事项

    1.保证足够大的内存. 2.Mongodb跟mysql一样,对于常用的查询条件,该建索引的建索引.不要认为内存够用,数据就会在内存,有时,内存够用,数据也不一定在内存. 3.使用副本集,一个主库,进行 ...

  7. 用Linux命令行实现删除和复制指定类型的文件

    (一)Linux 删除当前目录及子目录中所有某种类型的文件 方法1 : 此方法不能处理目录中带空格的那些. rm -rf `find . -name "*.example"` Li ...

  8. sql连接查询 2011-10-10 23:13 (QQ空间)

    在关系数据库管理系统中,表建立时各数据之间的关系不必确定,常把一个实体的所有信息存放在一个表中,通过连接运算符可以实现多个表查询.连接是关系数据库模型的主要特点,也是它区别于其它类型数据库管理系统的一 ...

  9. android jni——helloworld

    看了网上好多牛人写的学习系列都是用HelloWorld作为开始,我们这里也用HelloWorld来开始我们的学习,首先我们来介绍下JNI吧. JNI作为java代码和C/C++的桥梁而存在的,为了让j ...

  10. Swift 3.0 字符串、数组、字典的使用

    1.字符串 string func stringTest() -> Void { // 字符串 let str1 = "yiyi" let str2 = "2222 ...