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

时间: 2018-04-17阅读: 963标签: 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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

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

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

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

关于ajax请求数据,并将数据赋值给全局变量的一些解决方法

在使用ajax请求数据是,开始的时候是打算将ajax的数据取出,并赋予给全局变量,但是在实际编码过程中发现并不能将数据赋予给最开始定义的全局变量,出现这个问题的原因是由于ajax异步加载的原因,所以只能用其他方法来解决,下来是解决的方法

$.ajax防止多次点击重复提交的方法

第一种:使用$.ajaxPrefilter( [dataTypes], handler(options, originalOptions, jqXHR) ) 方法;第二种:使用beforeSend选项,在发送请求前将提交按钮变为不可用的状态;

JQuery中的ajax

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

Ajax原理以及优缺点

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

ajax是什么?如何创建一个ajax?

ajax(asynchronous javascript and xml)主要用来实现客户端与服务器端的异步通信,实现页面的局部刷新。XMLHttpRequest用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

ajax设置header头部之后造成跨域的解决方案

解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头、正确响应options请求,正确设置 JavaScript端需要设置的headers信息 方能实现。

Content-Type属性的取值和作用

Content-Type 的值类型:application/json:消息主体是序列化后的 JSON 字符串,application/x-www-form-urlencoded:数据被编码为名称/值对。这是标准的编码格式

js 判断异步执行完成方法总汇,比如多个ajax执行完毕后执行其他方法

在多个异步操作中,由于不确定异步操作的执行顺序,如何判断异步操作在已经执行完成的情况下,再执行一个新的操作,有哪些方法可以实现?

封装的一个Ajax小框架

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

点击更多...

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

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广