html5+express实现拖拽上传

「爱情、让人受尽委屈。」 2022-06-15 05:20 245阅读 0赞

## html5的drag和drop ##

*  drag和drop基本介绍

>  *  drag：控件一开始拖的时候进行响应
>  *  drop：拖拽中的控件放下的时候进行响应
>  *  具体可参考：[http://www.w3school.com.cn/html5/html\_5\_draganddrop.asp][http_www.w3school.com.cn_html5_html_5_draganddrop.asp]

*  html5实现拖拽响应

> 拖拽上传，我们拖拽的文件，并不需要它在拖拽前响应事件，只需要在拖拽后响应异步上传的事件，也就是实现drop方法，并在drop方法中将文件POST出去

<div class='dropzone'>You can drop markdown file anywhere to upload </div>
    
      <script type="text/javascript">
        /* 给控件绑定drop事件 */
        $('#dropzone').on('drop', function(event) {
         
          /* 获取文件 */
          var file = event.originalEvent.dataTransfer.files[0];
          /* 采用FormData接口 相关信息：自行查询*/
          var formData = new FormData();
          formData.append('file', file);
    
          $.ajax('/upload', {
            method: 'POST',
            contentType: false,
            processData: false,
            data: formData,
            error: function(xhr, error) {
         
              console.log('upload failed');
            },
            success: function(response) {
         
              console.log('upload success');
            }
          });
    
          return false;
        })；
      </script>

## express路由响应 ##

*  构建响应POST方法的路由

[http_www.w3school.com.cn_html5_html_5_draganddrop.asp]: http://www.w3school.com.cn/html5/html_5_draganddrop.asp