文件上传的动作不能太俗,必须页面无刷新上传

人生永远没有太晚的开始

  好久没有更新博客了,说实话,每天抽空打开博客园总感觉心里很空虚,不是没有在修行,而是因为最近在跟着博老前辈完成一项很重要的使命——打造属于我们自己的奇遇帝国,好了废话不多说,首先我在北京向各位带好,希望各位能在2018年达到自己预设的人生高度。

常规操作上传文件

1 <form action="xxx.action" method="post" enctype="multipart/form-data">
2     <input type="file" name="userfile" multiple><br>
3     <input type="submit" value="上传">
4 </form>

  点击那个诱人的submit按钮上传,OK,完成!相信很多大佬还在用上面这种简单粗暴的方式完成文件上传的动作,哥哥,都什么时代了,还用这种方式,如果提交这样的代码上去,脸都会被打肿,我们要的是页面无刷新上传哦,哈哈哈~~~~

页面无刷新上传文件

  完成这项优雅的操作,首先是有必要认识一下XMLHttpRequest对象的,XMLHttpRequest是一个 API,它为客户端提供了在客户端和服务器之间传输数据的功能。它提供了一个通过 URL 来获取数据的简单方式,并且不会使整个页面刷新。这使得网页只更新一部分页面而不会打扰到用户。XMLHttpRequest 在 AJAX中被大量使用。说到这里就有人说,你卖了半天关子,不就是异步上传嘛,ajax谁不会,分分钟的事儿就优雅的完成了,但是我想说ajax固然重要也依然能很好的完成这个动作,有时候专业的事情交给专业的人去做效果是非常好的。

接下来我强调一点,因为我们接下来讨论的XMLHttpRequest指的是XMLHttpRequest Level 2,因为XMLHttpRequest Level 1有如下限制:

  • 仅支持文本数据传输, 无法传输二进制数据.
  • 传输数据时, 没有进度信息提示, 只能提示是否完成.
  • 受浏览器 同源策略 限制, 只能请求同域资源.
  • 没有超时机制, 不方便掌控ajax请求节奏.

但是XMLHttpRequest Level 2针对这些缺陷做出良好的改进:

  • 支持二进制数据, 可以上传文件, 可以使用FormData对象管理表单.
  • 提供进度提示, 可通过 xhr.upload.onprogress 事件回调方法获取传输进度.
  • 依然受 同源策略 限制, 这个安全机制不会变. XHR2新提供 Access-Control-Allow-Origin 等headers, 设置为 * 时表示允许任何域名请求, 从而实现跨域CORS访问(有关CORS详细介绍请耐心往下读).
  • 可以设置timeout 及 ontimeout, 方便设置超时时长和超时后续处理.

目前, 主流浏览器基本上都支持XMLHttpRequest Level 2, 除了IE系列需要IE10及更高版本. 因此IE10以下是不支持XHR2的.

要码运行

整个上传的动作概括为一句话就是:这里提到的FormData就是我们最常用的一种方式,通过在脚本里新建FormData对象,把File对象设置到表单项中,然后利用XMLHttpRequest异步上传到后台服务器即可,就很简单的完成真个优雅的动作。

<!-- XMLHttpRequest实现异步上传文件 -->
<input type="file" name="userfile" onchange="fileSelected(this);" multiple/>
<script type="text/javascript">
    function fileSelected(userfile) {
        uploadFile(userfile);
    }
    function uploadFile(userfile) {
        var fd = new FormData();         //FormData对象
        var length = userfile.files.length;        //获取选中文件的个数(单文件直接追加即可)
        for(var i=0; i<length; i++){
            fd.append("userfile", userfile.files[i]);    //多文件追加到FormData
        }
        //fd.append("userfile", userfile.files[0]);        //单文件追加到FormData
        var xhr = new XMLHttpRequest();       //XMLHttpRequest对象
        xhr.open("POST", "${qy }/upload/uploadFiles");      //初始化一个请求
        // 注意:所有相关的事件绑定必须在调用send()方法之前进行.
        xhr.send(fd);//发送请求. 如果该请求是异步模式(默认),该方法会立刻返回. 相反,如果请求是同步模式,则直到请求的响应完全接受以后,该方法才会返回.
    }
</script>
 1      /**
 2      * 多文件上传
 3      * @param file
 4      * @return
 5      * @throws Exception
 6      */
 7     @RequestMapping(value="/uploadFiles",method=RequestMethod.POST)
 8     @ResponseBody
 9     public String uploadFiles(@RequestParam("userfile")MultipartFile[] file) throws Exception{
10         int fileNumber = file.length;
11         if(fileNumber == 0){
12             logger.info("上传内容为空");
13             return "请选择文件";
14         }else{

参考

XMLHttpRequest API:https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest

优秀博客URL:http://louiszhai.github.io/2016/11/02/ajax/

原文地址:https://www.cnblogs.com/1315925303zxz/p/8267479.html

时间: 2024-10-10 04:26:20

文件上传的动作不能太俗,必须页面无刷新上传的相关文章

基于jQuery的ajax系列之用FormData实现页面无刷新上传

接着上一篇ajax系列之用jQuery的ajax方法向服务器发出get和post请求写,这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果,主要用到了jQuery的ajax()方法和XMLHttpRequest Level 2的FormData接口.关于FormData,大家可以看MDN文档. 1,先看效果图 期望的功能和效果很简单:点击页面中的上传文件表单控件,选择文件后点击"ajax提交",将文件上传至服务器,上传成功后,页面给出一个简单的提示. 2,前端的代

j2ee之页面无刷新上传附件

//上传附件 var uploadAnnex = function(){ //alert("??"); //document.getElementById('submitFile').onclick = function(event){ var applicationId = $("#applicationId").val(); if(event.preventDefault){//取消按钮默认提交行为 event.preventDefault(); } else

利用iframe无刷新上传文件的坑

原文:利用iframe无刷新上传文件的坑 页面里经常要用到文件上传的功能,而且要求页面不刷新,先说一下原理:页面里放一个file控件和submit按钮,外面用form表单包住,给form表单加上对应的属性值,action.method.entype.name,到这一步,能上传文件了,但是这样上传文件会刷新页面,这不是我们想要的.我们要的是文件上传时不刷新页面,那么也简单,在页面里放一个iframe,设置它的宽高为0,这里有两个坑: 1.需要设置iframe的name值与form的target属性

ajaxfileupload.js插件结合一般处理文件实现Ajax无刷新上传

先上几张图更直观展示一下要实现的功能.本功能主要通过Jquery ajaxfileupload.js插件结合ajaxUpFile.ashx一般应用程序处理文件实现Ajax无刷新上传功能,结合NPOI2.0实现数据读取.这个功能在实际工作种经经常使用到,希望能给须要做这方面的人有些帮助. 一.功能页面布局及介绍 1.上传页面布局及input file上传功能 2.上传页面文件正在上传效果 3.上传完毕效果,多文件展示区 二.功能代码实现及资源引用 1.js资源文件引用 html页面js引用.须要引

iframe实现无刷新上传文件(转)

其实在ajax出现之前,web应用也可以是无刷新的,那时大多通过IFrame来做到这一点.当然Ajax出现之后,人们一窝蜂地投奔Ajax 的阵营了,iFrame 就乏人问津了.但是用iFrame来实现无刷新上传文件确实一个很好的选择. [1].[代码] [HTML]代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <html>   <body>      <form action="upload.jsp

隐藏iframe无刷新上传文件

首先ajax不能上传文件,这误导了我有段时间,今晚睡不着就照着说明做了个无刷新上传文件 其实原理很简单 <form enctype="multipart/form-data" method="POST" target="upload" action="http://localhost/class.upload.php" > <input type="file" name="upl

Ajax 无刷新上传文件插件 uploadify 的使用

在表单中无法直接使用 Ajax 上传文件,解决的思路可以是使用插件无刷新地上传文件,返回文件上传后的地址,然后把该地址作为 Ajax 的参数传递给服务器端进行数据库处理.可以使用 uploadify 插件来实现该思路. 官方网站:http://www.uploadify.com 文档地址:http://www.uploadify.com/documentation/ 插件有 Flash 版 和 HTML5 版,项目中用到的是 Flash 版. 下载 Demo 并解压: 其中 index.php

文件无刷新上传并获取保存到服务器端的路径(swfUpload与uploadify)

文件无刷新上传并获取保存到服务器端的路径 遇到上传文件的问题,结合之前用到过的swfUpload,又找了一个无刷新上传文件的jquery插件uploadify,写篇博客记录一下分别介绍这两个的实现方法 swfUpload 导入swfUpload的开发包 添加js引用,引用swfUpload.js与handler.js文件,如果对swfUpload不了解.有疑问可以看看这篇博客 页面初始化 修改handler.js文件中 上传成功的事件,serverData是服务器端的响应 Uploadify 导

mvc中file无刷新上传文件

前言 上传文件应该是很常见必不可少的一个操作,网上也有很多提供的上传控件.今天遇到一个问题:input控件file无法进行异步无刷新上传.真真的感到别扭.所以就尝试这去处理了一下. 上传封装类: using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.IO; using System.Web; n