原生HTML标签和JavaScript语言实现文件(图片、文档、视频)上传

最新更新时间：2019年05月25日20:20:34

《猛戳-查看个人博客地图-总有你意想不到的惊喜》

本文内容：input标签实现文件上传，FormData对象实现文件上传

实现代码

//以图片为例，实现单文件上传
.courseSaleInfoUpload{
	width:50px;
	height: 50px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	opacity: 0;
	cursor: pointer;
}
<input
	className={styles.courseSaleInfoUpload}
	type='file'
	accept="image/*"
	onChange={(e)=>{this.uploadFileChange(e)}}
/>

beforeUpload = (file) => {
    const isIMG = ['image/jpeg','image/jpeg','image/png'].indexOf(file.type) != -1;
    if (!isIMG) {
      message.error('只能上传jpg、jpeg、png类型的图片');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      message.error('图片大小不能超过2MB!');
    }
    return isIMG && isLt2M;
}
  
uploadFileChange(e){
    let file = e.currentTarget.files[0];//{size:'',name:''}
    if(!this.beforeUpload(file)){
      return
    }
    uploadFile(file).then((res)=>{
      console.log(res);
      if(res.code == 100){
        //文件上传成功
      }else{
        message.destroy()
        message.error('上传失败，请从新上传');
      }
    })
};

//post方法
function uploadFile(file) {
  return new Promise((resolve,reject)=>{
    let url = 'http://10.201.16.82:8100/cadet/file/uploadFile'
    let formData = new FormData
    //post 接口须要的其余参数
    formData.append('params1', '')
    formData.append('params2', '')
    //文件数据
    formData.append('file', file)
    let xhr = null
    if(window.XMLHttpRequest){
		xhr = new XMLHttpRequest()
	}else{
		xhr = new ActiveXObject("Microsoft.XMLHTTP");
	}
    xhr.onload = function () {
      let data = JSON.parse(xhr.responseText)
      resolve(data)
    }
    xhr.onerror = function () {
      console.log('fail')
      reject('error')
    }
    xhr.open('post', url , true)//async ture-异步 false-同步
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
    xhr.send(formData)
  })
}

//post方法
function uploadFile(file) {
  return new Promise((resolve,reject)=>{
    let url = 'http://10.201.16.82:8100/cadet/file/uploadFile'
    let formData = new FormData
    //post 接口须要的其余参数
    formData.append('params1', '')
    formData.append('params2', '')
    //文件数据
    formData.append('file', file)
    let xhr = new XMLHttpRequest()
    xhr.open('post', url , true)
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
    xhr.onreadystatechange = function() {
      //readyState 0-请求未初始化 1-服务器链接已创建 2-请求已接收 3-请求处理中 4-请求已完成，且响应已就绪（下载操做已完成）
      if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {
        let data = JSON.parse(xhr.responseText)
        resolve(data)
      }
    };
    xhr.send(formData)
  })
}

//扩展 get方法原生实现
var xhr = new XMLHttpRequest();            
xhr.open('GET', 'http://10.201.16.82:8100/cadet/file/uploadFile?a=1&b=2', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) { 
  
  }
};
xhr.send();

todo

多文件上传 form原理 后端实现原理 进度显示

参考资料

• FormData.append()

• FormData()

• form - HTML

• XMLHttpRequest上传文件实现进度条

感谢阅读，欢迎评论^-^

打赏我吧^-^