html 5 模仿 form 提交file 文件之FormData

最新推荐文章于 2024-08-12 09:54:37 发布

一朵红杏

最新推荐文章于 2024-08-12 09:54:37 发布

阅读量1.6k

点赞数 1

分类专栏： front end Full stack engineer 文章标签： html ajax form formData

本文链接：https://blog.csdn.net/java_goodstudy/article/details/54606535

版权

front end 同时被 2 个专栏收录

56 篇文章

订阅专栏

Full stack engineer

6 篇文章

订阅专栏

使用xhtr 2 可以实现前端提交无刷新提交form表单

api 参考mdn : https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/%E5%88%A0%E9%99%A4

文章参考 http://blog.csdn.net/u014607184/article/details/52372551#comments

使用ajax 请求时 注意

       $.ajax({
          url : this.baseUrl+'updateHead',
          type : 'POST',
          data : formData,
          /**
           * 必须false才会避开jQuery对 formdata 的默认处理
           * XMLHttpRequest会对 formdata 进行正确的处理
           */
          processData : false,
          /**
           *必须false才会自动加上正确的Content-Type
           */
          contentType : false,
          success : function(responseStr) {
            alert("成功：" + JSON.stringify(responseStr));
          },
          error : function(responseStr) {
            alert("失败:" + JSON.stringify(responseStr));
          }
        });

form的处理比较简单  || 在这采用append方法, 不知道为什么 传入form 表单进行构造 fomrData 数据获取不到

        let f = $('#imgForm')[0];
        let formData = new FormData();
        formData.append("file", $("#uploadCom")[0].files[0]);
        formData.append('_token',this.token);
        console.log(formData);
        this.uploadHeader(formData);

最终form 提交的格式如下

这里写图片描述

此时contentType 已变为 mul..

    当然前端进行图片上传时,还可以使用html5 的fileReader api进行上传.依旧是监听Input窗的change 事件

   fileChange(e){
        var files = e.target.files || e.dataTransfer.files
        if (!files.length) return
        this.createImage(files)
      },

      createImage (file) {
        var vm = this
        var reader = null
        var leng = file.length
        for (var i = 0; i < leng; i++) {
          reader = new window.FileReader()
          //todo:// 二进制 与 base64 都可以实现
          reader.readAsBinaryString(file[i])
          reader.onload = (e) => {
            vm.images.push(e.target.result)
            this.uploadImgToServer(vm.images[0])
            window.vm = vm;
          }
        }
      },

    //点击其他按钮时触发  input 的click 事件  input 窗口默认隐藏
        uploadHeadImg(){
        //todo:// 触发file的点击事件
        document.getElementById('uploadCom').click();
      },

    //最后一步 将图片上传到服务器
      uploadImgToServer(imgData){
        this.$http.post(`${this.baseUrl}updateHead`,
          {
            imgData
          }
        ).then((res) => {
          alert('上传头像成功');
        }, () => {

        });
      },

关于ReadApi 的使用可以参考我上篇文章,建议去看mdn