使用FormData对象上传文件

OnlyLing 发布于2019-08-26 13:49 / 931人阅读

摘要：监听控件值的变化拼接参数文件参数方式，为服务器请求地址，该参数规定请求是否异步处理。

var form = document.getElementById("chooseFile");
form.addEventListener("change", function(ev) {//监听file控件值的变化
  var oData = new FormData();
  var file=this.files[0];
  //拼接参数
  formData.append("file", file);  // 文件
  formData.append("params", "参数");
  formData.append("array",JSON.stringify([1,2,3])); 

  var xhr = new XMLHttpRequest();
  xhr.open("post",url,true); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
  xhr.upload.onloadstart = function(){//上传开始
      //...
  };
  xhr.upload.onprogress = function(evt){//显示上传进度条
    var loaded = evt.loaded;//已经上传大小情况
    var tot = evt.total;//附件总大小
    var per = Math.floor(100 * loaded / tot);  //已经上传的百分比
    $("#uploadprogress").removeClass("hide").css("width",per+"%");
  };
  xhr.onload = function (evt) {//上传完成
     //...       
  };
  xhr.onerror = function () {
    alert("上传失败");
  };
 xhr.send(oData); //开始上传，发送form数据
}, false);

拖拽上传

 $(".divFile7")[0].ondrop = function (event) {

     event.preventDefault();//不要执行与事件关联的默认动作
     var files = event.dataTransfer.files;//获取拖上来的文件

     //以下代码不变
     var formData = new FormData();
     //参照上面代码......
 };

使用jqery上传文件的注意事项
需设置processData参数为false

$.ajax({
     url: "/Home/SaveFile2",
     type: "POST",
     data: formData,
     processData: false,  // 告诉jQuery不要去处理发送的数据
     contentType: false,   // 告诉jQuery不要去设置Content-Type请求头
     success: function (responseText) {
         alert(responseText);
     }
 });

监听黏贴操作将图片转换为base64

document.getElementById("messageText").addEventListener("paste",function(e){
        var data=e.clipboardData||window.clipboardData;
        blob=data.items[0].getAsFile();//获取图片内容
        var isImg=(blob&&1)||-1;//判断是不是图片，最好通过文件类型判断
        var reader=new FileReader();
        if(isImg>=0){
            reader.readAsDataURL(blob);//将文件读取为 DataURL
        }
        reader.onload=function(event){//文件读取完成时触发
            //event.target.result就是我们要的base64编码
        };
});

混合云云服务器 formdata上传文件对象存储oss上传文件 formdata 对象存储怎么使用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109607.html

FormData 和 Iframe上传文件的两种方式

摘要：还特别介绍一种用使用对象上传文件的方法。设置为上传文件不需要缓存。用上传文件因为不是所有浏览器都支持的，所以有时候需要用来实现文件上传的功能。用AJAX上传文件，一般都是用FormData对象。 FormData对象，是可以使用一系列的健值对来模拟一个完整的表单，然后使用XMLHttpRequest发送这个表单。 FormData的使用创建一个空的FormData对象，然后再用...

Dean 2019-08-20 14:48 评论0 收藏0
关于前端上传文件全面基础扫盲贴(三) ----- FormData

摘要：如果是传入三个参数的方式，那么该值将是一个布尔值，文件，或者一个，如果不是，将被转成一个字符串可选传给服务器的文件名称一个。系列文章关于前端上传文件全面基础扫盲贴(零)关于前端上传文件全面基础扫盲贴(一) ----- XMLHttpRequest关于前端上传文件全面基础扫盲贴(二) ----- File关于前端上传文件全面基础扫盲贴(三) ----- FormData关于前端上传文...

developerworks 2019-08-26 10:30 评论0 收藏0
node.js实现formdata上传文件

摘要：对象包含表单的文本域信息，或对象包含对象表单上传的文件信息。是文件的信息前端传递的文件类型在中获取将具有文本域数据，如果存在的话。 node.js实现formdata上传文件 1.关于formdata XMLHttpRequest Level 2 添加了一个新的接口——FormData。利用 FormData 对象，我们可以通过 JavaScript 用一些键值对来模拟一系列表单控件，...

Aceyclee 2019-08-22 13:56 评论0 收藏0
antd 和 element上传文件详解与FormData详解

摘要：当用户完成选择文件动作时，提交子页面中的。从此我们上传文件就欢欣鼓舞的来找了。因为的核心是对象，异步的实现是通过一个对象，一般简称该对象对。这些回答基于自己理解，如有不妥，希望路过的大神轻喷，指正。背景平时工作中经常会遇到需要上传文件的情况，如果你用ant design 或者element ,它们都提供了上传的组件。我们分别来看一下element 和 antd 手动上传怎么处理：...

Fundebug 2019-08-23 10:29 评论0 收藏0
移动端H5实现图片上传

摘要：需求公司现在在移动端使用实现图片上传，但最近需求太奇葩了，插件无法满足我们的经过商讨决定下掉这个插件，使用原生的实现图片上传。首先是有几种常见的移动端图片上传方式通过对象可以组装一组用发送请求的键值对。需求公司现在在移动端使用webuploader实现图片上传，但最近需求太奇葩了，插件无法满足我们的PM经过商讨决定下掉这个插件，使用H5原生的API实现图片上传。 7.3日发布：单张...

WelliJhon 2019-08-05 17:55 评论0 收藏0
Ajax 之文件上传

摘要：简单的上传例子先在里面准便好标签添加上传文件上传文件解读步骤的对象获取，对象生成使用的事件来获取，文件的内容使用的方法来添加一个新值到里面来使用的的方法来上传文件原理说明对象其实不止是可以用来上传文件，如同其名，可以模拟一系列表单控件的 showImg(https://segmentfault.com/img/bVbbKYh?w=1366&h=660); FormData 简单的上传例...

tomato 2019-08-26 11:58 评论0 收藏0