zoukankan      html  css  js  c++  java
  • 图片拖拽上传至服务器

      今天遇到一个新的问题,就是图片拖拽上传至服务器,一般,我们会想到使用ajax,但是现在问题是ajax默认是不能直接提交文件的的,也就是说,我们拖拽上传图片后,没法将上传的图片信息发送到服务器,这时候就要模拟form表单的提交了。

      既然要上传,这里首先要讲到的就是图片拖拽上传了。

    oDiv.ondrop = function(e) {
            e.preventDefault(); //获取拖拽过来的对象,文件对象集合
            var fs = e.dataTransfer.files; //若为表单域中的file标签选中的文件,则使用form[表单name].files[0]来获取文件对象集合
            console.log(fs.length); //打印长度
        //循环多文件拖拽上传
         for (var i = 0; i
    < fs.length; i++) {
             var _type
    = fs[i].type; console.log(_type); //获取文件类型
             if (_type.indexOf('image') !
    = -1) {
                console.log(fs[i].size);
    //文件大小控制
                var reader = new FileReader();//读取文件对象
                reader.readAsDataURL(fs[i]); //读为DataUrl,无返回值
              reader.onload = function() { } //当读取成功时触发,this.result为读取的文件数据
                reader.onloadend = function() {
                  if (reader.error){
                    console.log(reader.error);
                  }else{ //上传没有错误,ajax发送文件,上传二进制文件
                  } 
                }
            }else{
              alert('请上传图片文件!');
             }
        }
    }

      

      图片拖拽完成,现在要用ajax模拟表单提交事件(ps:以下代码是放在文件读取成功后的函数里面,也就是render.onload事件里面):

    xhr = new XMLHttpRequest(); 
    xhr.open("post", url, true);  // url为服务器地址
    xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); 
    var fd = new FormData(); 
    fd.append('file', fs[0]);  // file相当于input type=file,后面的fs[0]则是要提交的图片信息
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4&& xhr.status == 200){
            // ajax回调函数
        }
    }   
    xhr.send(fd);            
  • 相关阅读:
    LinkedHashMap源码学习
    HashMap源码学习
    Java中"或"运算与"与"运算快慢的三三两两
    Java源码记录
    SpringBoot系列随笔
    分布式事物
    分布式事物
    部署spring boot + Vue遇到的坑(权限、刷新404、跨域、内存)
    一次使用存储过程游标遇到的坑
    UML简单介绍—类图详解
  • 原文地址:https://www.cnblogs.com/jf-67/p/8082412.html
Copyright © 2011-2022 走看看