表单方式文件上传和获取文件属性

1.使用form上传文件：

复制代码
注：form表单里发送除文件外的数据，一般是新建一个type=hidden的input，value=‘需要传的数据’，每发送一个数据就需要一个input（相当于参数）

2.获取文件详细属性：
$("#fileContent").change(function(){
// 获取到file对象
var file = this.files[0]
// 声明FileReader实例化对象
var fr = new FileReader()
// 使用实例化对象的readAsDataURL API放入file对象
fr.readAsDataURL(file)
// 最后通过实例化对象的onload事件 获取文件详细属性
fr.onload = function (event) {

var data= event.target.result

        

          
        
        
        

          

          AI 代码解读
        
      
      

// 如果是图片则是base64 不然就是blob对象

console.log(data)

        

          
        
        
        

          

          AI 代码解读
        
      
      

}
})
复制代码
3.使用ajax上传form表单文件：
$("input[type='button']").on('click', upfile); function upfile() { var formData = new FormData(); formData.append("接收字段1", document.getElementById('file1').files[0]); formData.append("接收字段2", document.getElementById('file2').files[0]);$.ajax({
url: '接口地址url',
type: 'POST',
data: formData,
// 上传formdata封装的数据包
dataType: 'JSON',
cache: false,
// 不缓存
processData: false,
// jQuery不要去处理发送的数据
contentType: false,
// jQuery不要去设置Content-Type请求头
success: function(data) {
// 成功回调
console.log(data);
}
})
}
复制代码

如果没有使用JQ 而是原生的input file上传文件只需要：

html:

复制代码
JS:

function fileChange(e) {
  let file = e.target.files[0];
  console.log(file.lastModified);
  console.log(file.lastModifiedDate);
  console.log(file.name);
  console.log(file.size);
  console.log(file.type);
  console.log(file.webkitRelativePath);
}

        

          
        
        
        

          

          AI 代码解读
        
      
      

复制代码
作者: Bill 本文地址: http://biaoblog.cn/info?id=1569400620000

版权声明: 本文为原创文章，版权归 biaoblog 个人博客 所有，欢迎分享本文，转载请保留出处，谢谢！