使用FormData对象上传文件

0
<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编码
        };
});

如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的

载入中...