上传文件的几种方式

一、拖拽上传文件

css代码：

        .box {
            width: 300px;
            height: 300px;
            border: 1px solid red;
        }

        #ddd {
            width: 20px;
            height: 20px;
            border: 1px solid #000;
        }

        .obj {
            width: 100px;
            height: 100px;
        }

html代码：

<div class="box" draggable="true"></div>

js代码：

        // 获取元素
        let div = document.querySelector(".box")
        // 给元素添加拖拽的三个事件
        div.addEventListener("dragstart", denter, false)
        div.addEventListener("dragover", dover, false)
        div.addEventListener("dragend", dp, false)

        function denter(e) {
            e.dataTransfer.setData('a',10) // setData可以存储数据
            
        }
        function dover(e) {
            e.preventDefault()
            
        }
        function dp(e) {
            e.stopPropagation()
            e.preventDefault()//这两句是为了阻止浏览器的默认行为
            console.log(e.dataTransfer.getData("a"))//getData可以取出setData存的数据

            var file = e.dataTransfer.files
            handFiles(file)

        }
        function handFiles(file) {
            for (var i = 0; i < file.length; i++) {
                var f = file[i]
                // image/ 定义正则表达式，上传文件为图片
                var imageType = /^image\//
                if (!imageType.test(f.type)) {
                    continue  //判断不是图片跳出本次循环
                }
                // 这里创建一个img标签，并用let定义以便解决全局作用域变量提升问题
                let img = document.createElement('img')
                // var img = document.createElement('img')//用var定义，在下面要用立即执行函数解决作用域问题
                img.classList.add("obj") //添加属性
                div.appendChild(img) //追加到div元素

                var reader = new FileReader() // 读取文件的对象
                // 通过reader开始读取内容，一旦读取成功，会在resulte属性里面获取base64的字符串
                // 读取文件的过程是一个异步的过程
                reader.readAsDataURL(f)

                reader.onload = function(e){
                    img.src = e.target.result
                }

                /* 前面用var定义的话这里要解决作用域问题
                    reader.onload = function (aimg) {
                    return function (e) {
                        aimg.src = e.target.result
                    }
                }(img) */
            }
        }

二、利用post请求实现上传文件

原理使用form表单上传，用formData这种数据格式上传

html代码：

    <!-- type="text" 键值对方式提交 -->
    <!-- type="file" 上传 formData这种数据格式上传-->
    <form action="">
        value1: <input type="text" id="value1" name="v1">
        <br>
        value2: <input type="text" id="value2" name="v2">
        <br>
        <button>提交</button>
    </form>

js代码：

这里用的几种方案皆是使用的jQuery的方法来实现的，同时是用node.js写的服务端，用的请求是post请求，使用了formidable模块，下面是几种不同的方案。

方案一：

前端代码：

            $("button").click(function(e){
                e.preventDefault()//阻止默认的提交事件
                $.ajax({
                    url:"http://127.0.0.1:3000/add",
                    type:"POST",
                    data:{
                        val1:$("#value1").val(),
                        val2:$("#value2").val(),
                    },
                    success:function(res){
                        console.log(res);
                    }
                })
            })

后台代码：

router.post("/add",function(req,res,next){
  // /add  接口
  // url：http://127.0.0.1:3000
  // 请求参数 val1  val2
  //  v1 v2 前端使用字段
    res.json({
      code:200,
      message:"ok",
      data:{
        v1:req.body.val1,
        v2:req.body.val2
      }
    })
})

方案二：

前端代码：

 $("button").click(function(e){
                e.preventDefault()
                //1 创建formData数据格式
                var formData = new FormData($("form")[0])// FormData 参数是一个dom的form对象
                //2 把传递给服务器的数据追加到formdata对象里面
                formData.append('val1',$("#value1").val()) 
                formData.append('val2',$("#value2").val()) 
                // 删除数据
                // formData.delete('val1')
                // formData数据上传针对input=file，在上传文件的时候采用formData数据格式，大部分的浏览器都支持formData数据类型
                // 使用serilayArray() 只能传递普通的参数
                $.ajax({
                    url:"http://127.0.0.1:3000/addFormData",
                    type:"POST",
                    data:formData,
                    cache:false,//不使用缓存
                    // 如果提交数据格式为formData类型，必须添加下面两句，否则报错
                    processData:false,// 不处理数据，不希望使用application/x-www-form-urlencoded
                    contentType:false,//不采用默认的数据类型进行提交。默认的提交数据格式是application/x-www-form-urlencoded
                    success:function(res){
                        console.log(res);
                    },
                    error:function(err){
                        console.log(err.state());
                    }

                })


            })

服务端代码：

router.post('/addFormData',function(req,res,next){
  console.log("11")
  // 获取form表单传递过来formData格式的数据
    var formData =  new formidable.IncomingForm()
    console.log(formData)
    // err:解析出错的错误原因
    // fields：form传递的文本数据
    // files form传递的文件数据
    formData.parse(req,function(err,fields,files){
      res.json({
        code:200,
        message:"ok",
        data:{
          v1:fields.val1,
          v2:fields.val2
        }
      })
    })

})

方案三：

前端代码：

 // 第三种方法
            // serialize() form表单里面具有name属性的标签进行序列化，序列化字符
            // console.log($("form").serialize());
            $("button").click(function (e) {
                e.preventDefault()
                $.ajax({
                    url:"http://127.0.0.1:3000/addserialize",
                    type:"POST",
                    data:$("form").serializeArray(),
                    success:function(res){
                        console.log(res);
                    }
                })

            })

服务端代码：

router.post("/addserialize",function(req,res,next){
    res.json({
      code:200,
      message:"ok",
      data:{
        v1:req.body.v1,
        v2:req.body.v2
      }
    })
})