使用AJAX实现文件拖拽上传功能详解

时间: 2018-04-17阅读: 1831标签: ajax

概述

对于微云、百度云等网盘提供的文件存储服务而言,文件上传是一个重要功能。文件上传的方式主要有两种:二进制数据上传、表单上传。本文会详细解析表单上传的协议规范,前端上传文件的两种方式:对话框选择方式、拖拽选择方式,服务端接收上传的文件以及文件上传功能的技巧等。


表单上传协议详解

RFC1867(https://www.ietf.org/rfc/rfc1867.txt) 规范了表单上传的协议格式。下面给出一个例子,用Fiddler抓包工具,抓取同时上传两个字符串内容和一个文本文件的HTTP请求,获取的请求内容如下:

POST http://localhost:8080/Server/uploadfile HTTP/1.1
Host: localhost:8080
Connection: keep-alive
Content-Length: 391
Cache-Control: no-cache
Origin: chrome-extension://fdmmgilgnpjigdojojpjoooidkmcomcm
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (Khtml, like Gecko) Chrome/55.0.2883.87 Safari/537.36
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryuA8AsEvrgV5BUqe5
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.8

------WebKitFormBoundaryuA8AsEvrgV5BUqe5
Content-Disposition: form-data; name="file1"

value1
------WebKitFormBoundaryuA8AsEvrgV5BUqe5
Content-Disposition: form-data; name="file2"; filename="test2.txt"
Content-Type: text/plain

hello world
------WebKitFormBoundaryuA8AsEvrgV5BUqe5
Content-Disposition: form-data; name="file3"

value3
------WebKitFormBoundaryuA8AsEvrgV5BUqe5--


1.添加表单描述头部

使用表单上传功能,需要在头部添加如下代码,其中“multipart/form-data”表示请求上传的内容类型为表单,“boundary”表示分隔符,用于分割表单里面的每项内容。

Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryuA8AsEvrgV5BUqe5回车换行


2.添加表单内容

表单中每项内容的类型无外乎就两种,一种是文本类型,另外一种是文件类型。每项内容之间需要用“–+boundary+回车换行”进行分割,紧接着分隔符的代码用于描述内容配置。其中文本类型的内容需要添加如下格式的代码:

------WebKitFormBoundaryuA8AsEvrgV5BUqe5回车换行
Content-Disposition: form-data; name="file3"回车换行
回车换行
value3回车换行

“name”用于描述表单的字段名称,两个回车换行之后就是这个字段的值。文件类型的内容跟文本类型对比多了两个字段,“filename”用于描述上传的文件的名称,“Content-Type”用于描述上传的文件类型(文件的MIME),文件类型的内容需要添加如下格式的代码:

------WebKitFormBoundaryuA8AsEvrgV5BUqe5回车换行
Content-Disposition: form-data; name="file2"; filename="test2.txt"回车换行
Content-Type: text/plain回车换行
回车换行
hello world回车换行

添加完表单的每项内容之后,需要在后面追加“–+boundary+–+回车换行”,完成表单内容的拼接。


前端选择文件上传的两种方式

1.对话框选择方式上传

实现对话框选择文件,会用到如下代码:

    <form action="http://localhost:8080/Server/uploadfile" method="post" enctype="multipart/form-data">
        <br> 文件:
        <input type="file" name="image">
        <br>
        <input type="submit" value="上传">
    </form>

其中action字段为文件上传的接口地址,enctype需要定义为“multipart/form-data”、input标签的type属性的值为“file”,对应的name为表单的字段名称。


2.拖拽选择方式上传

要实现这个功能,可借助html5新增的“Drag and drop”功能。W3C官方文档为:https://www.w3.org/TR/2014/CR-html5-20140731/editing.html。 利用它,我们可以知道文件何时被拖动到目标区域、文件何时离开目标区域、有哪些文件被拖到了目标区域。接下来就具体聊聊“Drag and drop”功能。


如何知道文件何时拖动到目标区域又何时离开目标区域?

HTML中的每个标签都能够设置跟拖动相关的事件,拖动事件的回调函数解释如下:

事件描述
ondragstart拖动操作开始时调用(部分浏览器不回调此方法)
ondrag拖动过程中调用(部分浏览器不回调此方法)
ondragenter刚拖动到目标元素区域时调用
ondragover在目标元素区域内拖动时调用,此方法会隔一段时间调用一次
ondragleave拖动离开目标元素区域时调用
ondragend拖动结束时回调(部分浏览器不回调此方法)
ondrop在目标元素区域内放开拖动内容时调用

注册事件可以使用如下代码:

//element可以为HTML标签、document
element.ondragstart = function(ev) {
    console.log('ondragstart');
}


注意:

浏览器默认在拖放完成时会打开所拖放的文件,正确的做法是要调用事件对象的preventDefault方法用来阻止事件的默认动作的执行。

//element可以为HTML标签、document
element.ondragover = function(ev) {
    ev.preventDefault();
    //do something
}


如何获取拖动的文件?

上面所列举的回调函数,每个回调函数里面都有一个参数DragEvent,DragEvent的接口定义语言描述如下:

interface DragEvent : MouseEvent {
  readonly attribute DataTransfer? dataTransfer;
};


可以看到拖动事件接口继承于鼠标事件接口,其中有个属性dataTransfer(数据传输者)用于传输拖动的内容,DataTransfer的接口定义语言如下:

interface DataTransfer {
           attribute DOMString dropEffect;
           attribute DOMString effectAllowed;

  readonly attribute DataTransferItemList items;

  void setDragImage(Element image, long x, long y);

  /* old interface */
  readonly attribute DOMString[] types;
  DOMString getData(DOMString format);
  void setData(DOMString format, DOMString data);
  void clearData(optional DOMString format);
  readonly attribute FileList files;
};


其中的setData方法用于设置要传输的内容,getData方法用于获取传输的内容。当要实现从一个元素中拖动内容到另外一个元素区域时可以使用者两个方法。拖动文件时值需要使用files属性,其值被浏览器设置进去了,因此只要获取即可。那么获取files的最佳时机是什么时候,当然是在ondrop方法回调时最佳。

dz.ondrop = function(ev) {
    //阻止浏览器默认打开文件的操作
    ev.preventDefault();
    //表单上传文件...

}


如何上传获取到的文件?

使用AJAX即可通过表单方式上传文件,附上前端拖拽上传的完整代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">

<head>
    <title>HTML5拖拽上传</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <style type="text/css">
    #dropzone {
        width: 300px;
        height: 300px;
        border: 2px dashed gray;
    }

    #dropzone.over {
        width: 300px;
        height: 300px;
        border: 2px dashed red;
    }
    </style>
</head>

<body>
    <div id="dropzone" dropEffect="link"></div>
</body>
<script type="text/JavaScript">
function uploadFile(formData) {
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'http://localhost:8080/Server/uploadfile', true);
    xhr.send(formData);
}
var dz = document.getElementById('dropzone');
dz.ondragover = function(ev) {
    //阻止浏览器默认打开文件的操作
    ev.preventDefault();
    this.className = 'over';
}

dz.ondragleave = function() {
    this.className = '';
}

dz.ondrop = function(ev) {
    this.className = '';
    //阻止浏览器默认打开文件的操作
    ev.preventDefault();
    //表单上传文件
    var formData = new FormData();
    formData.append('file', ev.dataTransfer.files[0]);
    uploadFile(formData);
}
</script>

</html>


服务端处理上传的文件

服务端代码本人采用JAVAEE开发,文件上传使用到commons fileupload组件:https://commons.apache.org/proper/commons-fileupload/download_fileupload.cgi,commons fileupload依赖common io库。

完整代码如下:

package com.servlet;

import java.io.File;
import java.io.IOException;
import java.util.Iterator;
import java.util.List;

import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

@WebServlet(name = "uploadfile", urlPatterns = "/uploadfile")
public class UploadFileServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {

        try {
            ServletContext servletContext = this.getServletConfig()
                    .getServletContext();
            // Create a factory for disk-based file items
            DiskFileItemFactory factory = new DiskFileItemFactory();
            // Set factory constraints
            String path = "D:\\upload";
            File uploadDir = new File(path);
            if (!uploadDir.exists()) {
                uploadDir.mkdirs();
            }
            factory.setRepository(new File(uploadDir.getAbsolutePath()));
            // Create a new file upload handler
            ServletFileUpload upload = new ServletFileUpload(factory);
            // Set overall request size constraint
            upload.setSizeMax(-1);
            // Parse the request
            List<FileItem> items = upload.parseRequest(req);
            // Process the uploaded items
            Iterator<FileItem> iter = items.iterator();
            while (iter.hasNext()) {
                FileItem item = iter.next();
                if (item.isFormField()) {
                    // 普通表单数据
                } else {
                    // 文件表单数据
                    item.write(new File(uploadDir.getAbsolutePath()
                            + File.separator + item.getName()));
                }
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}


文件上传功能的一些技巧

1.实现文件秒传功能

微云、百度云就含有文件秒传功能,其实现原理其实很简单,文件可以用其MD5来区分差异性。上传文件时计算文件的MD5,只要服务器上存在相同MD5值的文件,则不会真正的上传文件,而是把网盘上文件的索引存储到当前用户信息中。所以一般网盘上不会出现MD5值相同的文件。


2.防止可执行文件注入攻击

以tomcat服务器为例,WEB-INF目录可以被浏览器访问。如果用户将可执行的文件如xx.jsp上传到这个目录,里面编写了删除文件目录的代码,则当浏览器访问这个xx.jsp文件时,这段恶意代码就会被执行,这显然是恶意攻击。为了阻止这种行为,正确的做法是过滤掉可执行文件,不让其上传,这种判断前端和后端都需要做,前端做的目的是可以减轻服务端的判断压力,后端做是为了阻止模拟的HTTP请求上传恶意文件。原文链接


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/647

JQuery中的ajax

ajax() 方法用于执行 AJAX(异步 HTTP)请求。 所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求。语法

浅谈Ajax的优缺点

AJAX (Asynchronous JavaScript and XML) 是一种交互式动态web应用开发技术,该技术能提供富用户体验。完全的AJAX应用给人以桌面应用的感觉。正如其他任何技术,AJAX有它自己的优缺点

js中关于ajax笔试面试题汇总

什么是ajax?Ajax包含下列技术,为什么要用ajax?Ajax应用程序的优势在于?Ajax的最大的特点是什么?请介绍一下XMLHTTPREQUEST对象?Ajax技术体系的组成部分有哪些?AJAX应用和传统Web应用有什么不同...

ajax请求 get与post的区别?_get和post的使用场景

使用Ajax时,采用Get或者Post方式请求服务器,那么它们的区别有哪些呢?相比post,get请求参数跟在url后面,提交数据的长度长度有限制,而且会被浏览器缓存起来,存在一定的安全问题。

javascript的ajax是什么?

AJAX(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。Ajax 它是与服务器交换数据的技术,在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求),它在不重载全部页面的情况下

Ajax原理以及优缺点

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理,我们必须对 XMLHttpRequest有所了解。

封装的一个Ajax小框架

在经历了Jsp实训的惨痛教训后,特意花了点时间学习Ajax,学完后自我感觉良好,于是写了如下一个小框架:

解决ajax跨域访问sessionid不一致问题

根据浏览器的保护规则,跨域的时候我们创建的sessionId是不会被浏览器保存下来的,这样,当我们在进行跨域访问的时候,我们的sessionId就不会被保存下来,也就是说,每一次的请求服务器就会以为是一个新的人

ajax提交 使用css 控制按钮防止重复点击

有时候遇到ajax提交数据时 多点几次会出现重复点击的情况.所以下面介绍一个用css控制防重复点击的效果,submitting 是一个类 没有任何意思,也可以写成变灰度的效果

使用原生Ajax进行用户名重复的检验

XMLHtttpRequest对象调用status属性可获得服务器返回的 HTTP 状态码,Ajax请求时,加了个一时间戳,目的是防止浏览器使用缓存。因为在浏览器开了缓存的情况下,对同一链接的相同参数

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!