使用FormData对象上传文件

5次阅读

共计 1676 个字符,预计需要花费 5 分钟才能阅读完成。

<input type="file" name="file" id='chooseFile'/>
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);

拖拽上传

<textarea class="divFile7" style="min-width:800px;height:150px" placeholder="请将文件拖拽或直接粘贴到这里"></textarea>
 $(".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 编码
        };
});

正文完
 0